【问题标题】: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

【问题讨论】:

    标签: html twitter-bootstrap-3 font-awesome bootstrap-4


    【解决方案1】:

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

    (在 HTML 中为&lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"&gt;

    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="匿名" 这个链接真的对我有用。

              【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2018-11-28
              • 1970-01-01
              • 2014-01-16
              • 1970-01-01
              • 2021-01-23
              • 2014-05-05
              相关资源
              最近更新 更多