Fontawesome 样式未应用

Question

我有问题，我正在尝试获得与示例 (Fontawesom) 相同的结果 https://fortawesome.github.io/Font-Awesome/examples/

我要实施

等宽图标

我已经在我的文件夹中下载了 FontAwesome 包，并在 head 中添加了 link 我也试过 CDN，但结果相同。显示了图标，但未像示例中那样应用样式。

这是我的结果

  <link rel="stylesheet" href="css/font-awesome.min.css">

并列出

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

请帮忙，我做错了什么？

Answer 1

样式不一样，因为您在 anchor 标签中有 fontawesome 图标，所以图标继承了锚点样式。只需覆盖这些样式，例如：

.list-group-item{
     color: #000; /* black */
     text-decoration: none; /* remove the underline */
     display: block; /* to make the anchors take full width */
}

Answer 2

要做到这一点，您必须相应地更新 CSS。根据您的要求更改字体的颜色和大小。

Fontawesome 样式未应用

Fontawesome styles are not applied

html

css

font-face

font-awesome