字体真棒不适用于引导程序答案

【问题标题】：Font awesome is not working with bootstrap字体真棒不适用于引导程序
【发布时间】：2016-04-12 21:42:05
【问题描述】：

我是新手

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

<!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 类，我的意思是 fa fa-ban，但它不起作用！

有什么问题？

【问题讨论】：

检查控制台是否有错误，将脚本标签放在正文之外
@UbiquitousDevelopers 有一些警告，但我不知道为什么，我只是按照引导程序说的做了，我添加了一些对其 css 文件的引用......但我不知道是什么问题
它对我有用。只需使用 CTRL+F5 刷新页面

标签： css twitter-bootstrap fonts font-awesome

【解决方案1】：

尝试在<a> 中使用<i> 标签

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

现在我自己找到了答案。

如您所见，有一个指向index.css 的链接，我的index.css 中有一个错误代码，即：

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

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

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

【讨论】：

您确定这是问题所在吗？ css 选择器有一个错误，所以整个规则应该被浏览器忽略了。
@MrLister 是的，当我删除这些行时，这对我有用。我的 CSS 选择器问题是什么？我看不到
最下面的以*, * *,{开头，不正确。最后一个逗号不应该在那里。因此，由于选择器中有错误，浏览器会忽略整个样式规则。请参阅this fiddle，其中所有内容都应该是红色的，但事实并非如此。（如果您删除最后一个逗号，它确实起作用。）

【解决方案4】：

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

通过这个标签可以正常工作。

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

【讨论】：

【解决方案5】：

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

所以这个

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

必须替换为

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

【讨论】：