2015-01-15 61 views
23

鏈接/段落和圖標之間有空格的最佳方式是什麼?鏈接和圖標之間的空白,fontawesome

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

不工作,只是把一個空間文本之前,因爲它會被改回當您壓縮/醜化項目。

我試着用各種填充和邊距。無法讓他們分開。

回答

5

我猜idisplay: inline所以你必須設置其displayinline-blockmargin-right工作:

i { 
 
    display: inline-block; 
 
    margin-right: 1em; 
 
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

10

不知道,如果是最好的,但你可以添加一些margin-righti元件:

i { 
 
    margin-right: 10px; 
 
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<a href="#/upgrade/selection"><i class="fa fa-reply"></i>Change</a>

2

因爲我只是碰到了我在從字體真棒例如網頁克里斯蒂娜的建議仔細看看同樣的問題來了(對不起,我不能只回應還)。

<div class="list-group"> 
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a> 
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a> 
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a> 
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a> 
</div> 

最遠距離這裏被&nbsp;see screen 1)獲得,而不是從fa-fwsee screen 2,因爲這僅僅是統一的字體圖標本身的寬度,所以對於一個更好的看,你可能會想要去的兩個。

&nbsp;(這將被解釋爲一個空間)也不應該在基於一些快速測試縮小時產生任何麻煩。

0
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
<a href="#/upgrade/selection"><i class="fa fa-reply" style="padding-right:5px"></i>Change</a> 

後就可以-class =「發發回覆」做內部的CSS - 把風格=「填充右:5px的」 -

注意:如果你做更多然後一個圖標類型的填充大小將是不同的由1或-1 PX

0

只需使用這樣的:

a > i{ 
 
    padding-right:10px; 
 
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<a href="#/upgrade/selection"><i class="fa fa-reply "></i>Change</a>