字体令人讨厌的图标没有出现
字体令人讨厌的图标没有出现
提问于 2019-06-27 16:09:42
我见过几个人描述过类似的问题，但我所看到或尝试的都没有解决我的问题。我在本地存储字体5文件，但是当我试图添加一些图标时，它们不会出现在浏览器中。我试过几个浏览器，结果都是一样的。我怀疑错误在于我如何配置我的CSS文件，或者我需要将另一个FA文件添加到我的本地机器上，但是我无法证明这些假设中的任何一个。下面的片段无法工作，因为我正在运行xampp并将文件存储在本地，所以我还附加了一些最大窗口和较小窗口的图像。
小窗口：
Max窗口：
文件位置：
/*General Styles */
body {
font-family: "Roboto", Helvetica, Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
overflow-x: hidden;
}
/*Top Navbar Styles*/
#top{
background: #555555;
padding: 10px 0;
}
#top.offer{
text-transform: uppercase;
color: #ffff;
}
#top.offer.btn{
text-transform: uppercase;
}
@media (max-width: 991px) {
#top.offer{
margin-bottom: 10px;
}
}
@media (max-width: 991px){
#top{
font-size: 12px;
text-align: center;
}
}
#top a {
color: #fff;
}
#top ul.menu{
padding-top: 5px;
margin: 0;
text-align: right;
font-size: 12px;
list-style: none;
}
@media (max-width: 991px){
#top ul.menu{
text-align: center;
}
}
#top ul.menu > li{
display: inline-block;
}
#top ul.menu > li a{
color: #eeeeee;
}
#top ul.menu > li + li:before{
content: "|\00a0";
padding: 0 5px;
color: #f7f7f7;
}<!DOCTYPE html>
<html>
<head>
<title>E Commerce Store</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet">
<link href="styles/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
<link href="font-awesome/css/fontawesome.min.css" rel="stylesheet">
</head>
<body>
<div id="top"><!--top start -->
<div class="container"><!-- container start -->
<div class="col-md-6 offer"><!-- col md-6 offer start -->
<a href="#" class="btn btn-success btn-sm">Welcome : Guest </a>
<a href="#" >Shopping Cart Total Price: $100, Total Items 2 </a>
</div><!-- col md-6 offer end -->
<div class="col-md-6"><!-- col md-6 start -->
<ul class="menu"><!-- menu start -->
<li><a href="customer_register.php">Register</a></li>
<li><a href="checkout.php">My Account</a></li>
<li><a href="cart.php">Go to Cart</a></li>
<li><a href="checkout.php">Login</a></li>
</ul><!-- menu end -->
</div><!-- col md-6 end -->
</div><!-- container end -->
</div> <!-- top end -->
<div class="navbar navbar-default" id="navbar"><!-- navbar navbar-default start -->
<div class="container"><!-- container start -->
<div class="navbar-header"><!-- navbar-header start -->
<a class="navbar-brand home" href="index.php">
<img src="images/logo.png" alt="company logo" class="hidden-xs">
<img src="images/logo-small.png" alt="company logo" class="visible-xs">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span><i class="fas fa-align-justify"></i>
</button>
<button type="button" class="navbar-toggle" data-toggle="navbar-toggle" data-target="#search">
<span class="sr-only">Toggle Search</span><i class="fas fa-search"></i>
</button>
</div><!-- navbar-header end -->
<div class="navbar-collapse collapse" id="navigation"><!-- navbar-collapse collapse start -->
<div class="padding-nav" ><!-- padding-nav start -->
<ul class="nav navbar-nav navbar-left"><!-- nav navbar-nav navbar-left start -->
<li class="active"><a href="index.php">Home</a></li>
<li><a href="shop.php">Shop</a></li>
<li><a href="checkout.php">My Account</a></li>
<li><a href="cart.php">Shopping Cart</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul><!-- nav navbar-nav navbar-left start -->
</div><!-- padding-nav end -->
<a class="btn btn-primary navbar-btn right" href="cart.php"><i class="fas fa-shopping-cart"></i><span>4 items in cart</span></a>
<div class="navbar-collapse collapse right"><!-- navbar-collapse collapse right start -->
<button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search"><span class="sr-only">Toggle Search</span><i class="fas fa-search"></i></button>
</div><!-- navbar-collapse collapse right end -->
</div><!-- navbar-collapse collapse end -->
</div><!-- container end -->
</div><!-- navbar navbar-default end -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Stack Overflow用户
回答已采纳
发布于 2019-06-27 16:52:55
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56795019
复制相关文章
相似问题
腾讯云开发者
