我正面临这个问题fontawesome和bootstrap图标字体在显示的许多刷新后没有快速显示。
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6" lang="en"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie9" lang="en"><![endif]-->
<!--[if !IE]><!-->
<html class="non-ie" lang="en">
<!--<![endif]-->
<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>
<!--[if lt IE 9]>
<script src="inc-media/html5shiv.js"></script>
<script src="inc-media/respond.js"></script>
<![endif]-->
<!-- core css -->
<link href="inc-media/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="inc-media/reset-bootstrap.css" rel="stylesheet" type="text/css">
<link href="inc-media/checkbox.css" rel="stylesheet" type="text/css">
<link href="inc-media/fonts.css" rel="stylesheet" type="text/css">
<link href="inc-media/style.css" rel="stylesheet" type="text/css">
<link href="inc-media/responsive.css" rel="stylesheet" type="text/css">
<!-- core js -->
<script src="inc-media/jquery.min.js"></script>
<script src="inc-media/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<header>
<div class="row">
<!-- menu -->
<div class="col-xs-12 top_nav">
<div class="frame_wrap clearfix">
<!-- logo -->
<a href="javascript:;" class="brand"> <img src="inc-media/logo.png" class="img-responsive" /> </a>
<!-- logo /-->
</div>
</div>
<!-- menu /-->
<!-- main header (inner header) -->
<!-- main header (inner header) /-->
</div>
</header>
<main class="main container">
<div class="frame_wrap voffset2 clearfix">
<div class="row">
<div class="listing_main clearfix pull-left">
<header class="listing_head clearfix">
</header>
<!-- aside --->
<aside class="col-xs-3 bl-col filter">
<nav class="panel panel-default ns">
<div class="panel-body np">
<div class="main_row clearfix">
<div class="col-xs-12">
<h2 class="pull-left"><i class="fa fa-search fa-lg"></i> Refine</h2>
<a href="javascript:;" class="btn btn-default dg pull-right voffset2">Clear All</a> </div>
</div>
<div class="main_row clearfix">
<div class="col-xs-12"> <a href="javascript:;" class="btn btn-default col-xs-12 disabled voffset3 vonset3">Update my Result</a> </div>
</div>
<div id="accordion">
<div class="accordion_group clearfix">
<div class="accordion_heading"> <a data-toggle="collapse" data-parent="#accordion" href="javascript:;">Keyword <i class="fa fa-chevron-down pull-right"></i></a> </div>
<div class="accordion_body gray col-xs-12 hidden">
<div class="form-group has-feedback nm voffset3">
<input type="text" class="form-control cfc" placeholder="I'm looking for...">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
<div class="checkbox checkbox-inline voffset1 vonset3">
<input type="checkbox" id="newsletter" value="option1">
<label for="newsletter" class="col-xs-8"> Search title & description </label>
</div>
</div>
</div>
</div>
<div class="col-xs-12"> <a href="#" class="btn btn-primary col-xs-12 voffset3 vonset3">Update my results</a> </div>
</div>
</div>
</nav>
</aside>
<!-- aside /--->
<!-- listing section -->
<!-- create alert -->
<!-- create alert /-->
<div class="col-md-9 col-xs-12 bl-col">
<div class="col-xs-12 underline np">
<h3 class="nm pull-left">Adverts older than today </h3>
<ul class="list-unstyled list-inline pull-right vonset">
<li class="pl5 np"><a href="" class="btn btn-default btn-xs dg"><i class="fa fa-th-list"></i></a></li>
<li class="pl5 np"><a href="" class="btn btn-default btn-xs dg"><i class="fa fa-th"></i></a></li>
</ul>
</div>
<ul class="row bl-row list-unstyled lgv">
<li class="col-xs-12 col-sm-4 bl-col">
<article class="lm clearfix"> <a href="#">
<div class="thumbnail_container">
<div class="thumbnail thum_img thum_rollover"> <img src="" />
<div class="featured_tag"><span class="featured_tag_text">PREMIUM</span></div>
<span class="hpd_tag label-urgent">Homepage</span> </div>
</div>
</a> <a href="#">
<h2 class="ld_title nm pl10">Low Mileage Mercedes C180 Kompessor 1 owner Imported</h2>
</a> <span class="ad_price pl10 voffset1">Rs. 10 lac</span>
<ul class="list-inline list-unstyled voffset">
<li class="col-xs-6 bl-col eclps"><span class="pl10">Karachi, Pakistan</span></li>
<li class="col-xs-6 bl-col text-right"><span class="pr10">10/26/2015</span></li>
</ul>
</article>
</li>
</ul>
<!-- pagination -->
<ul class="pager customs_pagination center-block">
<li class="np"><a href="#"><i class="fa fa-chevron-left"></i> Previous</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="np"><a href="#">Next <i class="fa fa-chevron-right"></i></a></li>
</ul>
<!-- pagination /-->
</div>
<!-- listing section /-->
</div>
</div>
</div>
</main>
<!-- footer tab /-->
<!-- footer tab /-->
<footer class="row footer">
<div class="frame_wrap">
<h3 class="sub-head">Follow Test</h3>
<ul class="ft-social nav nav-pills">
<li><a href="javascript:;" class="btn btn-default sm_social_btn dg btn-sm"><span class="fa fa-facebook-f align fb"></span> Like</a></li>
<li><a href="javascript:;" class="btn btn-default sm_social_btn dg btn-sm"><span class="fa fa-twitter align tweet"></span> Tweet</a></li>
<li><a href="javascript:;" class="btn btn-default sm_social_btn dg btn-sm"><span class="fa fa-google-plus align gplus"></span> +1</a></li>
<li><a href="javascript:;" class="btn btn-default sm_social_btn dg btn-sm"><span class="fa fa-pinterest align pint"></span> Pin it</a></li>
</ul>
<nav class="ftr_nav">
<ul class="ftr_nm col-xs-12">
<li><a href="#">Help & Contacts</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Car Price Index</a></li>
<li><a href="#">Popular Searches</a></li>
<li><a href="#">About Bolee</a></li>
<li><a href="#">About Bolee</a></li>
</ul>
</nav>
<p class="copyright col-xs-12 np">Copyright © 2015 Test.com. All rights reserved</p>
</div>
</footer>
</div>
</body>
</html>
这是HTML让我知道我做错了什么。实际上有些时候字体显示得当。但当我再次打开我的网站时，它只隐藏显示空白框或文本。
答案 0 :(得分：0)
看起来像加载问题。
首先，您必须检查以下代码层次结构：
fontawesome.css位置底部
尝试一下，希望它能运作
或者请提供完整的代码
答案 1 :(得分：0)
确保您正确包含 font-family 并在头部和上方的html课程中正确加载字体真棒css 或 bootstrap css -
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>
或使用此
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
加载所有css后