Aligner des icônes géniales à côté du texte

Comment aligner les icônes avec un aspect propre? Mon code est collé ci-dessous. et ressemblent à this mais je veux que ça ressemble à this Aligner des icônes géniales à côté du texte

J'ai essayé de le mettre dans le tableau, puis aligner à gauche avec chaque td, mais les icônes sont déplacés vers le bas. Tout moyen possible? grâce

<p class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</p> 
<p class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</p> 
<p class="for-font-size"><span class="fa fa-venus-mars"></span> Male</p> 
<p class="for-font-size"><span class="fa fa-envelope"></span> [email protected]</p> 
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Source

2017-07-25 Ralph

S'il vous plaît code css –

Vous pouvez utiliser la police Impressionnant Fixed Width Icons (fa-fw) ou List Icons (fa-ul + fa-li).

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<p><u><code>fa-fw</code> class</u></p> 
 
<p><span class="fa fa-calendar fa-fw"></span> July 25, 2017</p> 
 
<p><span class="fa fa-map-marker fa-fw"></span> Sample City</p> 
 
<p><span class="fa fa-venus-mars fa-fw"></span> Male</p> 
 
<p><span class="fa fa-envelope fa-fw"></span> [email protected]</p> 
 
<p><span class="fa fa-phone fa-fw"></span> +12 34567890</p> 
 

 
<p><u><code>fa-ul</code> + <code>fa-li</code> class</u></p> 
 
<ul class="fa-ul"> 
 
    <li><span class="fa fa-calendar fa-li"></span> July 25, 2017</li> 
 
    <li><span class="fa fa-map-marker fa-li"></span> Sample City</li> 
 
    <li><span class="fa fa-venus-mars fa-li"></span> Male</li> 
 
    <li><span class="fa fa-envelope fa-li"></span> [email protected]</li> 
 
    <li><span class="fa fa-phone fa-li"></span> +12 34567890</li> 
 
</ul>

Source

2017-07-25 11:27:43 Shiva127

Merci beaucoup! – Ralph

puis-je utiliser mon icône personnalisée de mon fichier png? –

@calvinsugianto Posez cette question dans une nouvelle question SO. – Shiva127

Utilisez les balises <ul> et <li>, quelque chose comme ça,

<ul> 
<li class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</li> 
<li class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</li> 
<li class="for-font-size"><span class="fa fa-venus-mars"></span> Male</li> 
<li class="for-font-size"><span class="fa fa-envelope"></span> [email protected]</li> 
<li class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</li> 
</ul>

Vous pouvez également supprimer le class="for-font-size" si pas nécessaire.

Source

2017-07-25 11:25:42 John

Ajouter ce

.for-font-size .fa { 
    width: 15px; (arrording to font-size) 
}

Source

2017-07-25 11:26:11

Cela fonctionne aussi! mais avec le centre de texte-aligner. Merci! – Ralph

Heureux d'aider :) –

de style en ajoutant à votre balise span fixerai

span { 
 
width: 10px; 
 
padding-right: 15px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<p class="for-font-size"><span class="fa fa-calendar"></span> July 25, 2017</p> 
 
<p class="for-font-size"><span class="fa fa-map-marker"></span> Sample City</p> 
 
<p class="for-font-size"><span class="fa fa-venus-mars"></span> Male</p> 
 
<p class="for-font-size"><span class="fa fa-envelope"></span> [email protected]</p> 
 
<p class="for-font-size"><span class="fa fa-phone"></span> +12 34567890</p>

Source

2017-07-25 11:26:32

Donc, les gens veulent dire, pourquoi tant de downvote ...

.fa { 
    min-width:20px; 
    text-align:center; 
}

Source

2017-07-25 11:29:36 kloshar4o

Aligner des icônes géniales à côté du texte

Répondre

Questions connexes