Question

我有一个由字体很棒的图标和文字组成的菜单。当用户访问移动设备上的webapp时。我只想展示字体很棒的图标，用圆圈作为背景，没有文字。所以我在下面创建了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);
}

Answer 1

添加到.sub-navigation-button display:inline-block

Answer 2

您是否在网站主题部分调用了Font Awesome缩小的CSS文件？您应该有类似以下内容的行：

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

或者，您可以复制Font Awesome CSS并将其与您的站点一起存储在本地。仍然需要在该部分中调用CSS文件。

Answer 3

兄弟，检查您的导入声明 字体真棒。重要的是您如何根据其行为导入它。不要使用标签来导入字体很棒，总是使用 href 不以“cdnjs”开头的标签。这有时会妨碍 css，因为 js 在 css 之后加载，这会覆盖您的样式。

在字体令人敬畏的按钮后面的圆的背景

3 个答案: