一.圖標(biāo)下載
1. 話不多說上網(wǎng)址https://www.iconfont.cn/
2.先選擇圖標(biāo)加入購物車，記得先登錄
3.去購物車坛增，把圖標(biāo)添加到項(xiàng)目获雕，沒有項(xiàng)目的創(chuàng)建一個項(xiàng)目（為啥要創(chuàng)建項(xiàng)目不直接下載？答：方便后期修改圖標(biāo)和添加圖標(biāo)）
4.去資源管理點(diǎn)擊我的項(xiàng)目收捣，下載到本地届案。（聯(lián)網(wǎng)資源會導(dǎo)致微信小程序及app等出現(xiàn)不顯示的問題）
?
解壓后的目錄如下，現(xiàn)在我就做好準(zhǔn)備工作了
二.把圖標(biāo)引入到項(xiàng)目
1.先來看uniapp項(xiàng)目結(jié)構(gòu)
?
好多開發(fā)人員喜歡把資源放在static目錄下罢艾，其實(shí)這樣會導(dǎo)致打包的時候出現(xiàn)重復(fù)楣颠，增加包的體積
所以我們這里放置在了assets目錄下
?
現(xiàn)在還沒完，我們需要改一下css文件的文件引入地址（為啥要改css文件的文件引入地址咐蚯？答：有些版本會出現(xiàn)不兼容的問題童漩，導(dǎo)致圖標(biāo)顯示不出來）
?
在這里我改了iconfont的名字，改成了jpicon春锋，這樣的話我們在寫組件的時候就不能用iconfont矫膨，必須用jpicon
????
如圖，這樣我們就可以把這個組件import引入使用了
圖標(biāo)我們肯定是希望全局引入期奔，方法如下
找到main.js文件侧馅，在文件里面添加
import jIcon from "@/components/j-icon/j-icon.vue"
Vue.component('j-icon', jIcon)
其中? ? ? import? ? 組件名稱? ? ? from "組件地址"
Vue.component('使用的名稱', 組件名稱?)
使用：
<j-icon type="css屬性值" ?size="60" color="#fff"></j-icon>
?
這樣我們的圖標(biāo)就引入完成了
