今天我們主要說一下uniui里面的uni-icon的自定義圖標的問題,uni-icon默認的圖標不是很多,有時候不能滿足我們對特殊圖標的要求。
之前我們說過阿里巴巴矢量圖標庫在vue中的使用,使用流程和那個差不多,下面我們說一下和在vue中不同的地方。
引入阿里巴巴的矢量圖有兩種不同的方式,一種比較簡單但是即將被廢棄,另一種比較復(fù)雜。
首先,我們說一下比較復(fù)雜的但是后來要繼續(xù)用的,通過fontfamily引入
我們下載下來的ttf文件中,有很多圖標對應(yīng)的字體unicode的碼,我們需要做的就是使用如下代碼直接引入,其中fontFamily就是我們在阿里巴巴下載文件時設(shè)置的內(nèi)容,當(dāng)然也是可以下載下來改的。
<uni-icons fontFamily="CustomFont" :size="26">{{'\uebc6'}}</uni-icons>
另外一種比較簡單,我們忽略uniapp的復(fù)雜的使用方式。大家可以像這樣,class=“fontFamily 圖標名稱”以文字的形式引入。直接使用font-size調(diào)整大小。
<text class="iconfont icon-yiquxiao"></text>
上一篇: 如何搜索英文時搜索時不區(qū)分大小寫
下一篇: uniapp怎么組件間傳值的兩種方法