Ausrichtende Schriftart awesome Symbole neben Text

Wie richte ich die Symbole mit einem sauberen Look aus? Mein Code ist unten eingefügt. und sehen aus wie this, aber ich will es so aussehen wie this Ausrichtende Schriftart awesome Symbole neben Text

Ich versuchte es in der Tabelle zu setzen dann mit jedem td align gelassen, aber die Symbole nach unten bewegt werden. Irgendein möglicher Weg? Dank

<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>

Quelle

2017-07-25 Ralph

Bitte CSS-Code –

Sie Fixed Width Icons (fa-fw) oder List Icons (fa-ul + fa-li) die Schrift Ehrfürchtig verwenden können.

<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>

Quelle

2017-07-25 11:27:43 Shiva127

Vielen Dank! – Ralph

Kann ich mein benutzerdefiniertes Symbol aus meiner PNG-Datei verwenden? –

@calvinsugianto Stellen Sie das in einer neuen SO-Frage. – Shiva127

Verwenden Sie die <ul> und <li> Tags, so etwas wie dieses,

<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>

Sie können auch die class="for-font-size" entfernen, wenn nicht erforderlich.

Quelle

2017-07-25 11:25:42 John

diese zu Ihrem span Tag beheben wird es hinzufügen

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

Quelle

2017-07-25 11:26:11

Dies funktioniert auch! aber mit text-align center. Vielen Dank! – Ralph

Glücklich zu helfen :) –

Hinzufügen von Stil

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>

Quelle

2017-07-25 11:26:32

So gemein Leute, warum so viele ... downvote

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

Quelle

2017-07-25 11:29:36 kloshar4o

Ausrichtende Schriftart awesome Symbole neben Text

Antwort

Verwandte Themen