【问题标题】:Fontawesome styles are not applied未应用 Fontawesome 样式
【发布时间】:2023-03-11 02:58:02
【问题描述】:

我有问题,我试图得到与示例中相同的结果 (Fontawesom) https://fortawesome.github.io/Font-Awesome/examples/

我要实现

固定宽度图标

我已经在我的文件夹中下载了 FontAwesome 包并在头部添加了链接我也尝试过类似 CDN 但结果相同。显示了图标,但未应用示例中的样式。

http://imgur.com/3KZgMoV

这是我的结果

  <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>

请帮忙,我做错了什么?

【问题讨论】:

  • 请在问题中包含完整但最少的复制。
  • 是的,请提供一些代码
  • 请看我的更新

标签: html css font-face font-awesome


【解决方案1】:

样式不一样,因为 anchor 标记中有 fontawesoms 图标,因此图标继承了锚样式。只需覆盖这些样式,例如:

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

【讨论】:

    【解决方案2】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-04-22
      • 2018-02-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-28
      相关资源
      最近更新 更多