字体真棒按钮背后的圆形背景

我有一个菜单组成的字体真棒图标和文本。当用户访问手机上的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

字体真棒按钮背后的圆形背景

回答

相关问题