Wyrównaj tekst obok FontAwesome Icon

Question

Witam Mam problem z wyrównywaniem tekstu obok czcionki fajna ikona Próbowałem kilka rzeczy, ale nie z nich wydaje się działać, co próbuję zrobić, to zrobić panel z przycisk po jednej stronie, który można kliknąć, i wywołuje ten numer z charakterystyczną ikoną i tekstem po drugiej stronie panelu (używam programu do ładowania go w wersji 3.3.2)

Tutaj mam zdjęcie co próbuję zrobić http://i.imgur.com/0yCsdyG.jpg

i tutaj obraz co to obecnie wygląda http://i.imgur.com/UpMj6eJ.jpg

<div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
    <div class="col-lg-8"> 
 
     <i class="fa fa-phone fa-2x" style="align: middle;"></i> 
 
     <h3>Call us</h3> 
 
    </div> 
 
    <div class="col-lg-4 text-center"> 
 
     <div class="btn-group btn-group-justified" style="align: middle;" role="group" aria-label="..."> 
 
     <div class="btn-group" role="group"> 
 
      <button type="button" class="btn btn-default" <a href="tel:">Click the button to call us</a> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Aby mieć pełną kontrolę nad/niezależną pozycję, wygląd i rozmiar ikony font-niesamowite, spróbuj coś jak poniżej.

1. position with Dodaj do property value z relative do stylu h3 kontrolować nakładanie.

2. Zastosowanie :after selektor content wstawić ikonę

3. Dodaj position withproperty value z absolute do h3: po bloku kodu CSS

4. osiągnąć pożądaną pozycję z lewej, prawej, górnej lub dolnej wartości nieruchomości.

h3 { 
 
    position: relative; /* Helps us control overlap */ 
 
    padding-left: 25px; /* Creates space for the Phone Icon */ 
 
    } 
 

 
h3:after { 
 
    content: '\f095'; 
 
    font-family: fontAwesome; 
 
    position: absolute; 
 
    left: 0; /* Adjust as needed */ 
 
    top: 3px; /* Adjust as needed */ 
 
    }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<h3>Call us</h3>

Uwaga: Można dostosować wielkość ikon z CSS font-size wartości nieruchomości.

Answer 2

Spróbuj tego:

<i class="fa fa-phone fa-2x" style="vertical-align: middle;"></i> 

Answer 3

Użyj klasy .media.

Answer 4

Dla potomności, jeśli chcesz korzystać z flexbox CSS, wyrównanie ikon oprócz tekstu jest banalne.

Zachowałem Bootstrap i jego Panel jako część rozwiązania w duchu odpowiedzi na oryginalne pytanie.

Kluczowe punkty do odnotowania są tu:

• display: flex aby bezpośrednie dzieci płynąć w kierunku domyślnego (wiersz)
• align-items: center celu wyrównania wzdłuż elastycznego kierunku (pionowy align w tym przypadku)
• flex: 1 dostać odcinek środkowy, aby rozwinąć jak najwięcej, popychając dwa boki poza

.banner { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.banner-start h3 { 
 
    display: inline-block; 
 
} 
 

 
.banner-start i { 
 
    padding: 0 6px; 
 
} 
 

 
.banner-middle { 
 
    flex: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
    <div class="banner"> 
 
     <div class="banner-start"> 
 
     <i class="fa fa-phone fa-2x"></i> 
 
     <h3>Call us</h3> 
 
     </div> 
 
     <div class="banner-middle"> 
 

 
     </div> 
 
     <div class="banner-end"> 
 
     <div class="btn-group" role="group"> 
 
      <button type="button" class="btn btn-default"><a href="tel:">Click the button to call us</a> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

Jest bardzo prosty sposób, jeśli fontawesome ma ten sam rozmiar czcionki niż tekst (najczęściej jest to dobra praktyka), zawierają znaczniki w tagach tekstem:

<p> 
    <i class="fa fa-check"></i> 
Text text text 
</p>