前言

本文主要講述的是在使用uniapp中如何引入iconfont圖標(biāo)，以及兩種常用的位置。

• 位置一：App下原生導(dǎo)航欄的按鈕使用字體圖標(biāo)。
• 位置二：頁(yè)面中的任意位置使用iconfont圖標(biāo)。

第一步：打開iconfont官網(wǎng)新建項(xiàng)目并添加自己所需要的圖標(biāo)

這里是iconfont的網(wǎng)址鏈接： iconfon官網(wǎng)

新建項(xiàng)目

不 要 勾 選 彩 色 ， 會(huì) 導(dǎo) 致 在 項(xiàng) 目 中 無(wú) 法 修 改 字 體 顏 色 及 樣 式 ， 本 人 親 測(cè) ， 找 了 半 天 解 決 辦 法 最 終 悔 恨 不 已 \textcolor{red} {不要勾選彩色，會(huì)導(dǎo)致在項(xiàng)目中無(wú)法修改字體顏色及樣式，本人親測(cè)，找了半天解決辦法最終悔恨不已} 不要勾選彩色，會(huì)導(dǎo)致在項(xiàng)目中無(wú)法修改字體顏色及樣式，本人親測(cè)，找了半天解決辦法最終悔恨不已

• App下原生導(dǎo)航欄的按鈕如果使用字體圖標(biāo)，注意檢查字體庫(kù)的名字（font-family）是否使用了默認(rèn)的 iconfont，這個(gè)名字是保留字，不能作為外部引入的字體庫(kù)的名字，需要調(diào)整為自定義的名稱，否則無(wú)法顯示
• 按鈕上顯示的文字。使用字體圖標(biāo)時(shí) unicode 字符表示必須 ‘\u’ 開頭，如 “\ue123”（注意不能寫成"\e123"）。

選擇自己需要的圖標(biāo)加入購(gòu)物車再添加到項(xiàng)目中

第二步：下載我們所需要的iconfont.css文件并引入到項(xiàng)目中

下載項(xiàng)目并解壓

將iconfont.css文件復(fù)制放到我們的項(xiàng)目中去，一般放在static靜態(tài)文件目錄下

第三步：修改iconfont.css文件中的內(nèi)容并全局引用

需要注意的是，當(dāng)我們?cè)陧?xiàng)目中新添加了圖標(biāo)后，需要重新復(fù)制修改iconfont.css中的內(nèi)容，要不然新添加的圖標(biāo)是找不到的

在移動(dòng)端引用的時(shí)候要在App.vue文件中進(jìn)行全局注冊(cè)，而不是main.js中

第四步：使用iconfont圖標(biāo)進(jìn)行開發(fā)

在開發(fā)中我們常用的有兩種方式，這兩種方式以及注意事項(xiàng)我在以下內(nèi)容都有演示：

在頁(yè)面文件中直接使用標(biāo)簽使用APPplus原生的自定義導(dǎo)航欄iconfont右側(cè)自定義圖標(biāo) 1.在頁(yè)面文件中直接使用標(biāo)簽

兩種方式代碼的獲取方式如下圖所示：

使用uniCode碼Font Class 名稱

2.使用APPplus原生的自定義導(dǎo)航欄iconfont右側(cè)自定義圖標(biāo)

使用iconfont圖標(biāo)的文件內(nèi)容（忽略css樣式）：

需要配合static目錄下的iconfont.tff文件，這個(gè)文件在我們下載到本地的時(shí)候那個(gè)目錄中，與iconfont.css在一個(gè)目錄中：

pages.json文件中配置iconfont圖標(biāo)：

這三步完成，我們配置自定義原生導(dǎo)航欄的自定義圖標(biāo)就完成啦！

五：需要注意的點(diǎn)寫在這里：

1. iconfont官網(wǎng)創(chuàng)建項(xiàng)目的時(shí)候，不要勾選彩 色 \textcolor{red} {彩色}彩色 那個(gè)多選框，否則使用的時(shí)候不能更改顏色
2. 如果項(xiàng)目重新添加了新的圖標(biāo)，需要重新生成在線鏈接，更新iconfont.css文件
3. 自定義原生導(dǎo)航欄使用iconfont圖標(biāo)時(shí)，必須配合iconfont.ttf文件使用

總結(jié)

到此這篇關(guān)于小程序開發(fā)之uniapp引入iconfont圖標(biāo)以及使用方式的文章就介紹到這了,更多相關(guān)uniapp引入iconfont圖標(biāo)及使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論