Font awesome 不适用于 bootstrap

Question

我是新来的bootstrap

我新建了一个页面，这是我的页面（上面没有内容！）

<!DOCTYPE html>
<html lang = "fa">

   <head>
   <meta charset = "utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">

      <title>TEST</title>

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" href="style/index.css">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



   </head>

   <body>
    <header>
     <div class="container">
        <a class="fa fa-ban">Test ban</a>
     </div>
     </header>






      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

   </body>
</html>

如您所见，我有一个 <a> 元素，它有一个 font-awesome class，我的意思是 fa fa-ban，但它不起作用！

问题是什么？

Answer 1

尝试在 <a>

中使用 <i> 标签

<a href="#"><i class="fa fa-ban"></i>Test ban</a>

Answer 2

这对我有用：https://jsfiddle.net/fka3gp1b/

我可能会稍微重新格式化您的代码，使字体真棒图标成为锚元素的子元素，如下所示：

<a href="#"><i class="fa fa-ban"></i>Test ban</a>

同样，使用 span 标签也同样有效：

<a href="#"><span class="fa fa-ban"></span>Test ban</a>

Answer 3

现在我自己找到了答案。

如您所见，有一个 link 到 index.css，我的 index.css 中有一个小错误代码，即：

*, *:after, *:before{
    box-sizing: inherit;
}

*, * *,{
    /* Set your content font stack here: */
    font-family: 'arad', Times, "Times New Roman", serif !important;
}

当我删除它时，它现在可以正常工作了！

Answer 4

这对我有用：https://jsfiddle.net/smit_patel/teg7kfc4/

使用此标签工作正常。

<a><i class="fa fa-2x fa-ban"></i>Test ban</a>

Answer 5

我怀疑你不能直接使用 <a> 标签内的类。

所以这个

<a class="fa fa-ban">Test ban</a>

必须替换为

<a href="#"><i class="fa fa-ban"></i>Test ban</a>

Font awesome 不适用于 bootstrap

Font awesome is not working with bootstrap

css

twitter-bootstrap

fonts

font-awesome