對齊文字旁邊的字體棒圖標

如何將圖標與乾淨的外觀對齊？我的代碼粘貼在下面。並看起來像this但我想它看起來像 this 對齊文字旁邊的字體棒圖標

我試圖把它放在表中然後左對齊每個td但圖標向下移動。任何可能的方式？感謝

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

來源

2017-07-25 Ralph

請CSS代碼 –

您可以使用字體真棒Fixed Width Icons (fa-fw)或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>

來源

2017-07-25 11:27:43 Shiva127

非常感謝！ – Ralph

我可以使用我的png文件中的自定義圖標嗎？ –

@calvinsugianto在一個新的SO問題中提出這個問題。 – Shiva127

使用<ul>和<li>標籤，這樣的事情，

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

您也可以刪除class="for-font-size"如果不是必需的。

來源

2017-07-25 11:25:42 John

這

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

來源

2017-07-25 11:26:11

這工作呢！但與文本對齊中心。謝謝！ – Ralph

樂意幫忙:) –

添加樣式添加到您的span標籤將修復它

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>

來源

2017-07-25 11:26:32

卑鄙的人，爲什麼這麼多的downvote ...

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

來源

2017-07-25 11:29:36 kloshar4o

對齊文字旁邊的字體棒圖標

回答

相關問題