uni-app 使用 iconfont


 更新:

  根據官網 小於 40kb 的字體文件可以直接本地引用。

  方法如下:

    首先下載字體文件。

    然后刪除多余文件,只需要留下 iconfont.ttf 和 iconfont.css 文件即可使用。

    放入到 static 下。

    修改 iconfont.css 文件,如下

    

    左側紅框里是留下的字體文件,右側是修改 iconfont.css 樣式。

    然后,引入 樣式文件:

   

    最后,就可以在 項目中使用了。

    

     下面是 實際效果:設置了大小和顏色。

      

 

 

 


 

使用 uni-app 做項目時需要用到 iconfont。和 web 使用略有差別。謹以此記錄。

因為 uni-app 不能使用本地字體圖標庫,所以不能直接下載使用。

1、將iconfont中需要的圖標,加入購物車,然后放到項目。生成在線代碼,稍后用。

2、下載項目至本地。然后解壓取出 iconfont.css 文件。

3、將 1 中的在線代碼 copy 替換掉 iconfont.css 中的 @font-face。並且加上前綴 https: 。完成后如下:

這樣就是引用的 阿里巴巴的 在線圖標庫了。

4、在項目中需要的地方引入 這個改好的 iconfont.css 文件。

HTML 部分:

使用圖表有兩種 方法:如上所示。其中 selfStyle 是自己設置的 圖標樣式,就可以像設置字體那樣設置了。

至此,完成。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM