Wie richtet man Text neben einem Icon aus?

Question

Ich habe eine Kontaktseite, auf der ich ein Bild habe, gefolgt von einem Symbol und etwas Text. Ich möchte den Text neben dem Symbol ausrichten.

<div class="col-lg-7 col-md-7 col-xs-7" style="text-align: center;"> 
 
     <img src='../assets/img/Website-Png/map2.jpg' > 
 
     <br><br><br> 
 
     <div> 
 

 
      <i class="fa fa-map-marker" id="contact_icon1" aria-hidden="true"></i> 
 
      <span class="contact_font1">505-506, Kshitij Building, Veera Desai Rd, <br> Andheri West, Mumbai 40 0053</span> 
 

 
     </div><br> 
 
     <div> 
 
      <span> 
 
       <i class="fa fa-phone" id="contact_icon2" aria-hidden="true"></i> 
 
      </span> 
 
      <span class="contact_font2">+91 22 6470 1000</span> 
 
     </div><br> 
 
     <div> 
 
      <span> 
 
       <i class="fa fa-envelope-o" id="contact_icon3" aria-hidden="true"></i> 
 
       <span class="contact_font3">info@mentoria.com</span> 
 
      </span> 
 
     </div> 
 
    </div>

Answer 1

versuchen, diese

Add Klasse Ihrem div:

<div class="icon-text-group"> 
     <i class="fa fa-map-marker" id="contact_icon1" aria-hidden="true"></i> 
     <span class="contact_font1">505-506, Kshitij Building, Veera Desai Rd, <br> Andheri West, Mumbai 40 0053</span> 
</div> 

dann CSS für die Klasse hinzufügen:

.icon-text-group i, .icon-text-group span { 
    display: inline; 
} 

Answer 2

Sie müssen nicht zu viel divs verwenden, und wenn Sie div verwenden möchten, brauchen Sie keinen Zeilenumbruch. Da div ein Element auf Blockebene ist, wird es automatisch in der nächsten Zeile beginnen. Sie können stattdessen <p></p> verwenden.

auch,

Sie Text unmittelbar nach <i></i>

zB schreiben,

<p> 
     <i class="fa fa-map-marker"></i> 243 Elm Street,Claremont,NH 03743 
     <i class="fa fa-phone"></i> <a href="#">603-542-7771</a> 
    </p> 

Sie können Kontaktnummer im Anker-Tag hinzufügen, und wenn Sie möchten, können Sie hinzufügen Klasse-Tag zu verankern .

Versuchen Sie immer, Ihren Code so klein wie möglich einzupacken. Dies wird helfen, Ihre Seite schneller zu laden.