老师，请问为什么显示不了字体图标呀？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=muyun, initial-scale=1.0">
<title>慕云游商城 -机票、酒店、旅游攻略</title>
<meta name="keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="description" content="慕云游商城，10年的旅游经验，为您提供全方位的旅游服务">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 页面头部 -->
<header class="site-head">
<!-- 顶端导航条 -->
<div class="topbar">
<div class="center-wrap">
<nav class="shortcut-links">
<ul>
<li><a href="">目的地</a></li>
<li><a href="">锦囊</a></li>
<li class="menu"><a href="">社区</a>
<em class="arrow">
<b></b>
<i></i>
</em>
</li>
<li><a href="">行程助手</a></li>
<li class="menu"><a href="">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em></li>
<li class="menu"><a href="">酒店.名宿</a>
<em class="arrow">
<b></b>
<i></i>
</em></li>
<li><a href="">特价酒店</a></li>
</ul>
</nav>
<!-- iconfont图标 -->
<nav class="nav-r">
<span class="iconfont">

</span>
</nav>
</div>
</div>
<!-- 主导航条 -->
<nav class="main-nav">
<div class="center-wrap">
<ul>
<li class="menu"><a href="">机票自由行</a>
<div></div>
</li>
<li><a href="">优惠机票</a></li>
<li class="menu"><a href="">跟团游</a></li>
<li><a href="">酒店</a></li>
<li class="menu"><a href="">当地玩乐</a></li>
<li><a href="">签证</a></li>
<li><a href="">邮轮</a></li>
<li><a href="">河轮</a></li>
<li><a href="">保险</a></li>
<li><a href="">租车自由</a></li>
<li class="menu"><a href="">深度旅游</a></li>
<li><a href="">私人订制</a></li>
</ul>
</div>
</nav>
<!-- logo -->
<div class="logo">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="btn">
<input type="text" placeholder="">
<!-- iconfont图标 -->
<a class="serch" href="">
</a>
</div>
</div>
</div>
</header>
</body>
</html>
@font-face {
font-family: 'iconfont';
src: url('iconfont.ttf?t=1623153984590') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.clearfix{
overflow:hidden;
}
.clearfix::after{
content:'';
display: block;
clear:both;
overflow:hidden;
}
.center-wrap{
width: 1152px;
margin: 0 auto;
}
.db{
display: block;
}
.dib{
display: inline-block;
}
.tac{
text-align: center;
}
a{
text-decoration: none;
color: #fff;
}
17
收起
正在回答
1回答
同学你好，老师测试了一下，猜测是以下原因：
1、使用@font-face引入字体图标库时，建议使用兼容性写法，如图
2、页面中应用的字体编码对应的图标，需要下载才可使用。老师这里没有同学的字体库文件，所以没办法测试同学的字体库文件中是否存在编码对应的图标，建议同学自己再尝试一下。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星