字體真棒按鈕背後的圓形背景

我有一個菜單組成的字體真棒圖標和文本。當用戶訪問手機上的Web應用程序時。我只想顯示帶圓圈的字體超棒圖標作爲背景，並且沒有文字。所以我創建了下面的CSS，但我似乎無法讓它工作。有小費嗎？字體真棒按鈕背後的圓形背景

<a ui-sref="index" class="sub-navigation-button" ui-sref-active="sub-navigation-button-active"> 
    <i class="fa fa-dot-circle-o"></i> 
     <span>Exit</span> 
</a> 

.sub-navigation-button { 
    font-family: inherit; 
    font-weight: 500; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    border-radius: 50%; 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 
    background: rgba(255, 255, 255, 1); 
    text-transform: uppercase; 
} 

.sub-navigation-button-active { 
    font-size: 17px; 
    width: 30px !important; 
    height: 30px !important; 
    line-height: 30px; 
    border-radius: 50%; 
    overflow: hidden; 
    -webkit-backface-visibility: hidden; 
    color: rgba(255, 255, 255, 1) !important; 
    background: rgba(3, 169, 244, 1); 
}

來源

2014-09-22 User183849481

添加到.SUB導航鍵display:inline-block

來源

2014-09-22 20:30:18

雖然有效，但它們並不以圓形爲中心。 – User183849481 2014-09-22 20:44:20

你叫你的網站頭部分的字體真棒縮小的CSS文件？您應該擁有如下所示的行：

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

或者，您可以複製Font Awesome CSS並將其與您的站點本地存儲在一起。 CSS文件仍然需要在部分中調用。

來源

2014-09-22 20:33:29 khilley

是的，我之前甚至在這裏問過... – User183849481 2014-09-22 20:52:16

好的。我認爲你應該可以用Font Awesome fa-stack來描述你所描述的內容。圖標和圓圈都可以是字體真棒顯示。這裏有一段代碼片段摘錄了我最近做過的類似事情： ---抱歉無法計算如何格式化此部分，希望該示例有幫助！ – khilley 2014-09-22 21:01:14

字體真棒按鈕背後的圓形背景

回答

相關問題