小米商城项目实战（二）

补充上篇关于如何使用 iconfont 图标

1. 方式一：下载图片到本地直接使用
   此种方式适合用在图标引用特别少，以后也不需要特别维护的场景
   

2. 方式二：font-class 引用
   相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
   第一步：复制项目下面生成的fontclass代码，引入头部：
   

   第二步：挑选相应图标并获取类名：
   

3. 方式三：将字体文件下载到本地添加到项目中
   第一步：打包好的字体文件下载到本地：
   

   第二步：解压的文件都放在一个文件夹内，然后放在项目目录中,再在项目中引入iconfont.css文件：
   

其他更多方式详见官网

一、效果

二、导航栏HTML

<!--导航S-->
		<div class="page-nav">
			<div class="container">
				<img src="img/images/mi-logo.png" alt="" class="logo">
					<ul class="nav">
						<li class="nav-item" id="page-all-nav">
							<a href="" id="all-nav" style="font-size: 16px;">全部商品分类</a>
							<!--全部分类下拉菜单-->
							<div class="slider-nav">
								<ul class="slider-ul">
									<li class="slider-li">
										<a href="" class="name">
											<span>手机</span>
											<i class="iconfont icon-xiangyou"></i>
										</a>
										<div class="slider-pop">
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xm11.png" alt=""/>
												<p>小米11</p>
											</a>
	
										</div>
									</li>
									<li class="slider-li">
										<a href="" class="name">
											<span>电视</span>
											<i class="iconfont icon-xiangyou"></i>
										</a>
										<div class="slider-pop">
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/xmtv.png" alt=""/>
												<p>小米电视</p>
											</a>
										</div>
									</li>
									<li class="slider-li">
										<a href="" class="name">
											<span>笔记本</span>
											<span>平板</span>
											<i class="iconfont icon-xiangyou"></i>
										</a>
										<div class="slider-pop">
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">
												<img src="img/images/bjb.png" alt=""/>
												<p>小米笔记本Pro 15</p>
											</a>
											<a href="" class="pop-li">