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

有什么问题？

Answer 1

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

通过此标记正常工作。

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

Answer 2

尝试在<i>

中使用<a>标记

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

Answer 3

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

所以这个

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

必须替换为

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

Answer 4

这对我有用：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 5

现在我自己找到了答案。

如您所见，指向index.css的链接，我的index.css中的代码有点不好：

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

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

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

字体真棒不使用bootstrap

5 个答案: