FontAwesome 图标没有显示，为什么？ (Font-awesome/4.2.0)

Question

Fontawesome 图标没有显示。我想将它们添加到页脚中。我的 css 和 html 文件在同一个 directory.But 中，图标仍然不可见。（而且页面加载时间也比平时长，我想我添加了 enoguh 信息，但该网站仍然不允许我提出问题，我进行了搜索，但我仍然对此一无所知所以..)

我的代码：

footer {
  background-color: #33383c !important;
  padding: 70px 0px;
}

footer ul li {
  padding: 5px 0px;
}

.adress span,
.contact span,
.social span {
  color: #FFF !important;
  font-weight: 800;
  padding-bottom: 10px;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 3px;
}

.adress li p,
.contact li a,
.social li a {
  color: #FFF !important;
  letter-spacing: 2px;
  text-decoration: none;
  font-size: 15px;
}

.social li {
  float: left;
}

.adress,
.contact,
.social {
  list-style: none;
}

.fa {
  color: white !important;
  margin-right: 15px;
  font-size: 14px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-4 col-xs-12">
        <ul class="adress">
          <span>Adress</span>
          <li>
            <p>ENGLAND</p>
          </li>

          <li>
            <p>+12905555555555</p>
          </li>

          <li>
            <p>abc@gmail.com</p>
          </li>
        </ul>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
        <ul class="contact">
          <span>Contact</span>
          <li>
            <a href="#">Contact Form</a>
          </li>

          <li>
            <a href="#">About</a>
          </li>
        </ul>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
        <ul class="social">
          <span>SOCIAL</span>
          <li>
            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-github fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
          </li>

          <li>
            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Answer 1

对我来说它似乎有效。

<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
    <meta content="utf-8" http-equiv="encoding" />
    <meta charset="utf-8" />
    <title>Social font-awesome</title>
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <style type="text/css">
        footer{
            background-color: #33383c !important;
            padding:70px 0px;
        }          

        footer ul li{
           padding:5px 0px;
        }

        .adress span , .contact span , .social span{
          color: #FFF !important; 
          font-weight: 800; 
          padding-bottom: 10px; 
          margin-bottom: 20px;
          display: block;
          text-transform: uppercase;
          font-size: 20px;
          letter-spacing: 3px;
        }

        .adress li p , .contact li a , .social li a{
           color:#FFF !important;
           letter-spacing: 2px;
           text-decoration:none;
           font-size:15px;
        }

        .social li{
           float:left;
        }

        .adress , .contact , .social {
           list-style: none;
        }
    </style>
</head>

<body>
 <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">
                    <ul class="social">
                       <span>SOCIAL</span>    
                       <li>
                            <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
                       </li>
                      
                       <li>
                            <a href="#"><i class="fa fa-github fa-2x"></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i class="fa fa-linkedin fa-2x"></i></a>
                       </li>
                       
                       <li>
                            <a href="#"><i class="fa fa-tumblr fa-2x"></i></a>
                       </li>
                        
                       <li>
                            <a href="#"><i class="fa fa-google-plus fa-2x"></i></a>
                      </li>
                     </ul>
                </div>
           </div> 
        </div>
    </footer>

</body>

</html>

你试过 ping 了吗？

$] ping maxcdn.bootstrapcdn.com
...
^C
--- maxcdn.bootstrapcdn.com ping statistics ---
3 packets transmitted, 3 received, 0% packet loss, time 2002ms

Answer 2

我设法通过运行您在我的浏览器本地直接提供的代码重现了您的问题。

SO 片段系统确实在代码中添加了一些东西（比如 doctype、body 元素，如果它还不存在等等）所以做了一些允许 FA 图标加载到片段系统而不是原始代码中的事情本地。（不知道是什么，希望有人解释一下）。

无论如何，如果您进入开发工具检查工具，您可以在本地看到文件未加载。

当我将 https: 添加到 url 的前面时，它确实加载了并且图标显示正常。所以使用这个：

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

FontAwesome 图标没有显示，为什么？ (Font-awesome/4.2.0)

FontAwesome icons are not showing, Why? (Font-awesome/4.2.0)

html

css

frontend

font-awesome