字体真棒图标不起作用

时间:2014-01-08 01:30:31

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

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

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

5 个答案:

答案 0 :(得分:21)

这是3.2.1针对网站网址的错误,已在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

答案 1 :(得分:2)

Try with this..

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

答案 2 :(得分:1)

只需使用以下代码

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

答案 3 :(得分:0)

我遇到了与你相同的问题,我按照 Wobuffet 的解决方案进行了操作,但它无法正常工作。

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

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

答案 4 :(得分:0)

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

Fonts