-
1. 在iconfont官網(wǎng)https://www.iconfont.cn/中選中需要的icon
進入官網(wǎng)之后需要登錄，可以直接選擇GitHub登錄或者微博登錄，登錄之后搜索需要的icon，并加入到購物車。
加入購物車
-
2. 將icon加入到指定項目
選好icon之后點擊頁面右上角的購物車，點擊添加到指定的項目，如果之前沒有項目就新建項目。
添加到指定項目
-
3. 通過在線引入的方式將icon引入到項目中
進入到添加的項目中，選擇symbol，點擊生成代碼：
點擊生成代碼
點擊使用幫助
找到symbol使用
在幫助文檔中找到symbol使用，拷貝上面symbol點擊生成的代碼（不是文檔中的symbol代碼）到全局引入.js文件的地方，比如：
<body>
<script src="http://at.alicdn.com/t/font_2541171_6j176nunsfb.js"></script>
</body>
在需要引入icon的.html中添加css（最好在項目中全局定義）。
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
在需要引入icon的位置加入如下內(nèi)容進行引入該icon
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
此處的#icon-xxx需要換為項目中的icon的名稱
image.png
-
4. 通過本地引入的方式引入icon
本地引入時將symbol下生成的代碼粘貼到瀏覽器地址欄中；
粘貼代碼到瀏覽器地址欄
將瀏覽器中的內(nèi)容另存為一個.js文件，比如保存為icon.js，將該.js文件保存到項目指定位置，并在全局中引入該.js文件，并刪除在線引入的方式。比如：
<body>
<!-- <script src="http://at.alicdn.com/t/font_2541171_6j176nunsfb.js"></script> -->
<script src="/src/global/icon/icon.js"></script>
</body>
