今天我們主要說(shuō)一下uniui里面的uni-icon的自定義圖標(biāo)的問(wèn)題,uni-icon默認(rèn)的圖標(biāo)不是很多,有時(shí)候不能滿足我們對(duì)特殊圖標(biāo)的要求。
之前我們說(shuō)過(guò)阿里巴巴矢量圖標(biāo)庫(kù)在vue中的使用,使用流程和那個(gè)差不多,下面我們說(shuō)一下和在vue中不同的地方。
引入阿里巴巴的矢量圖有兩種不同的方式,一種比較簡(jiǎn)單但是即將被廢棄,另一種比較復(fù)雜。
首先,我們說(shuō)一下比較復(fù)雜的但是后來(lái)要繼續(xù)用的,通過(guò)fontfamily引入
我們下載下來(lái)的ttf文件中,有很多圖標(biāo)對(duì)應(yīng)的字體unicode的碼,我們需要做的就是使用如下代碼直接引入,其中fontFamily就是我們?cè)诎⒗锇桶拖螺d文件時(shí)設(shè)置的內(nèi)容,當(dāng)然也是可以下載下來(lái)改的。
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>
另外一種比較簡(jiǎn)單,我們忽略u(píng)niapp的復(fù)雜的使用方式。大家可以像這樣,class=“fontFamily 圖標(biāo)名稱”以文字的形式引入。直接使用font-size調(diào)整大小。
<text class="iconfont icon-yiquxiao"></text>