Fontawesome 圖示未顯示。我想將它們添加到頁腳中。我的 css 和 html 檔案位于同一目錄中。但圖示仍然不可見。（而且頁面加載時間比平時長，我想我添加了 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>[email protected]</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>uj5u.com熱心網友回復：
我設法通過在我的瀏覽器中本地運行您直接提供的代碼來重現您的問題。
SO 代碼段系統確實在代碼中添加了一些東西（如 doctype、body 元素，如果它不存在的話等），因此正在做一些事情，允許 FA 圖示加載到代碼段系統中，但不能加載到本地的原始代碼中。（我不知道是什么，希望有人解釋）。
無論如何，如果您進入開發工具檢查設施，您可以在本地看到檔案未加載。
當我將 https: 添加到 URL 的前面時，它確實加載了并且圖示顯示正常。所以使用這個：
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
uj5u.com熱心網友回復：
對我來說，它似乎作業。
<!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
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/474064.html