先說一下優點：
		1/圖示向量化，不用擔心失真問題
		2/本質上是字型，可以用css控制圖示大小/顏色/陰影等
		3/圖示豐富，也可上傳

[iconfont網站地址](http://www.iconfont.cn/)

註冊這裡就不說了，網上有很多資料講解，也很簡單，我就自己作為初學者感覺繞的地方說說。

一/ 如何下載iconfont圖示
	首先將自己看中的圖示加入購物車——進入購物車——選擇“新增至專案”（如果沒有專案可以新建一個）——進入圖示管理介面
	![iconfont圖示管理介面](https://img-blog.csdnimg.cn/20181116094105732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ==,size_16,color_FFFFFF,t_70)
	將下載的檔案解壓縮後，有如下檔案
	![下載的iconfont檔案](https://img-blog.csdnimg.cn/20181116094416144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ==,size_16,color_FFFFFF,t_70)
	其中，demo_fontclass.html是對“font-class”的使用說明
	           demo_symbol.html是對“symbol”的使用說明
	           demo_unicode.html是對“unicode”的使用說明
	大家可以下載檢視，我下面就將這三種用法說明一下

二/ “font-class”的使用（單色圖示建議用這個，書寫簡單直觀）
	1.1.將下載的“iconfont.css”檔案（或整個下載的檔案）放入你的專案中，並引入需要該css檔案的html檔案中，例如
		<link rel="stylesheet" href="css/iconfont.css">
	1.2.選擇相應圖示並獲取類名，應用於頁面
		

<i class="iconfont icon-xxx"></i>
	（"iconfont"是你專案下的font-family。可以通過“編輯專案”檢視並修改，預設是"iconfont"。）
	2.我在專案中的使用
		html程式碼：
			

<li class="footer-home"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>首頁</li>
                <li class="footer-classify"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>分類</li>
                <li class="footer-shopping"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>購物車</li>
                <li class="footer-my"><i class="iconfont icon-shejishi2" style="font-size:24px;"></i>我的</li>
        css樣式：
        	

.wrap-footer ul li {
				    display: inline-block;
				    position: relative;
				    width: 23%;
				    height: 100%;
				    font-size: 14px;
				    font-size: 14px;
				    color: #616161;
				    text-align: center;
				    line-height: 86px;
				}
            	.icon-shejishi2 {
				    font-size: 24px;//這麼寫是不起作用的
				    color: red;//修改顏色，只能是單色
				    position: absolute;
				    left: 38%;
				    top: -23px;
				}
		出來的效果圖：
			![效果圖](https://img-blog.csdnimg.cn/20181116100151786.png)
		**特別注意：修改字型圖示的大小要麼用行間樣式，如果用class選擇器要加!important（權重最高）**

三/ “unicode”的使用
	1.1.將整個下載下來的檔案放入你的專案中（當然可以不用整個，放入需要的檔案就行，反正檔案不大我就都放進來啦）
	1.2.在你需要小圖示的html檔案中引入如下的程式碼
		

<style>
	          @font-face {
	            font-family: 'iconfont';
	            src: url('iconfont/iconfont.eot'); //注意路徑，不可照搬
	            src: url('iconfont/iconfont.eot?#iefix') format('embedded-opentype'),
	            url('iconfont/iconfont.woff') format('woff'),
	            url('iconfont/iconfont.ttf') format('truetype'),
	            url('iconfont/iconfont.svg#iconfont') format('svg');
	        }
	          .iconfont{
	            font-family:"iconfont" !important;
	            font-size:16px;font-style:normal;
	            -webkit-font-smoothing: antialiased;
	            -webkit-text-stroke-width: 0.2px;
	            -moz-osx-font-smoothing: grayscale;
	        }
	       </style>
   1.3在頁面中使用小圖示
   		

<i class="iconfont">&#x33;</i>
   	2.我在專案中的使用
   		html程式碼
   			

<li class="footer-home"><i class="iconfont" >&#xe612;</i>首頁</li>
                <li class="footer-classify"><i class="iconfont">&#xe612;</i>分類</li>
                <li class="footer-shopping"><i class="iconfont">&#xe612;</i>購物車</li>
                <li class="footer-my"><i class="iconfont">&#xe612;</i>我的</li>
 		css程式碼
 			

.wrap-footer ul li {
				    display: inline-block;
				    position: relative;
				    width: 23%;
				    height: 100%;
				    font-size: 14px;
				    font-size: 14px;
				    color: #616161;
				    text-align: center;
				    line-height: 86px;
				}  
				.iconfont {
				    font-size: 24px !important;//權重最高
				    color: red;
				    position: absolute;
				    left: 38%;
				    top: -23px;
				}   
		效果圖和上面一樣，不展示了
	
	四/ “symbol”的使用
		1.1.將下載的“iconfont.js”檔案（或整個下載的檔案）放入你的專案中，並引入需要該css檔案的html檔案中，例如
			

<script src="iconfont/iconfont.js"></script>
		1.2.在你需要小圖示的html檔案中引入如下的程式碼
				

<style type="text/css">
			            .icon {
			            width: 1em; height: 1em;
			            vertical-align: -0.15em;
			            fill: currentColor;
			            overflow: hidden;
			        }
		 1.3.在頁面中使用小圖示
		 		

<svg class="icon" aria-hidden="true">
						  <use xlink:href="#icon-xxx"></use>
					</svg>
		 2.我在專案中的使用
		 	html程式碼（就放一個圖示吧）
		 		

<li class="footer-home">
	                    <svg class="icon" aria-hidden="true">
	                            <use xlink:href="#icon-shejishi2"></use>
	                    </svg>
	                    首頁
	                </li>
             css程式碼（和上面一樣）
             	

.wrap-footer ul li {
					    display: inline-block;
					    position: relative;
					    width: 23%;
					    height: 100%;
					    font-size: 14px;
					    font-size: 14px;
					    color: #616161;
					    text-align: center;
					    line-height: 86px;
					}
					.icon {
					    font-size: 24px !important;
					    color: red;
					    position: absolute;
					    left: 38%;
					    top: 6px;
					}
如果要使用多色圖示，可以參考這篇文章[Iconfont 多色圖示和漸變色圖示的應用](https://www.sohu.com/a/169212424_575744)  

五/ Unicode字符集可以用在偽元素的content裡，同樣可以通過css改變大小/顏色等