字体真棒图标不起作用

Posted 2023-03-05

【中文标题】字体真棒图标不起作用

【英文标题】：Font awesome icons not working

【发布时间】：2014-01-25 22:45:27

【问题描述】：

我正在尝试在我的删除和设置链接按钮前添加一个很棒的字体图标，但它不起作用。有人可以告诉我缺少什么吗？

html代码：

<div class="jumbotron">
    <p>
        <a class="btn btn-danger" href="#">
          <i class="fa fa-trash-o fa-lg"></i> Delete
        </a>
        <a class="btn btn-default btn-sm" href="#">
          <i class="fa fa-cog"></i> Settings
        </a>           
    </p>
  </div>

添加了这些css：

1) bootstrap.min.css 2) font-awesome.min.css

另外，请在此处查看fiddle。

【参考方案1】：

这是3.2.1 中针对站点 URL 的错误，已在 4.0.3 中修复。将链接外部链接替换为http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css

（在 HTML 中为<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">）

Check this Fiddle

【参考方案2】：

我遇到了和你一样的问题，我遵循了 Wobuffet 的解决方案，但它不起作用。

我在元素中添加了title =""，它解决了我的问题：

<i class="fa fa-pencil" title="Edit"></i> 

【参考方案3】：

就我而言，我没有将字体添加到项目中。我在开发者控制台中发现了一个错误，并将下面的字体添加到 Font Awesome(font-awesome.min.css) 正在寻找的位置。

【参考方案4】：

试试这个..

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
 
<div class="jumbotron">
    <p>
        <a class="btn btn-danger" href="#">
          <i class="fa fa-trash-o fa-lg"></i> Delete
        </a>
        <br>
        <a class="btn btn-default btn-sm" href="#">
          <i class="fa fa-cog"></i> Settings
        </a>           
    </p>
  </div>

【参考方案5】：

只需使用以下链接

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />

【参考方案6】：

link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ +LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="crossorigin="匿名" 这个链接真的对我有用。

【讨论】：

这个答案看起来和***.com/a/64234779/8517948 一样，如果你赞成那个答案，如果它解决了你的问题，它将帮助更多未来的读者。