小程序開(kāi)發(fā)之uniapp引入iconfont圖標(biāo)以及使用方式
前言
本文主要講述的是在使用uniapp中如何引入iconfont圖標(biāo)，以及兩種常用的位置。
- 位置一：App下原生導(dǎo)航欄的按鈕使用字體圖標(biāo)。
- 位置二：頁(yè)面中的任意位置使用iconfont圖標(biāo)。
第一步：打開(kāi)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’ 開(kāi)頭，如 “\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)行開(kāi)發(fā)
在開(kāi)發(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)寫在這里：
- iconfont官網(wǎng)創(chuàng)建項(xiàng)目的時(shí)候，不要勾選彩 色 \textcolor{red} {彩色}彩色 那個(gè)多選框，否則使用的時(shí)候不能更改顏色
- 如果項(xiàng)目重新添加了新的圖標(biāo)，需要重新生成在線鏈接，更新iconfont.css文件
- 自定義原生導(dǎo)航欄使用iconfont圖標(biāo)時(shí)，必須配合iconfont.ttf文件使用
總結(jié)
到此這篇關(guān)于小程序開(kāi)發(fā)之uniapp引入iconfont圖標(biāo)以及使用方式的文章就介紹到這了,更多相關(guān)uniapp引入iconfont圖標(biāo)及使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript創(chuàng)建自定義對(duì)象 創(chuàng)建Object實(shí)例添加屬性和方法
創(chuàng)建自定義對(duì)象的最簡(jiǎn)單的方式就是創(chuàng)建一個(gè)Object實(shí)例，然后再為它添加屬性和方法2012-06-06
substring是從中截取一段字符串,在組成一個(gè)新的字符串,這篇文章主要介紹了js中substring使用示例小結(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
js實(shí)現(xiàn)3D粒子酷炫動(dòng)態(tài)旋轉(zhuǎn)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D粒子酷炫動(dòng)態(tài)旋轉(zhuǎn)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
JS如何在不同平臺(tái)實(shí)現(xiàn)多語(yǔ)言方式
這篇文章主要介紹了JS如何在不同平臺(tái)實(shí)現(xiàn)多語(yǔ)言方式,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
今天的這篇文章就分享幾年以來(lái)總結(jié)的一些最常見(jiàn)和最有用的字符串相關(guān)的方法的例子和簡(jiǎn)要說(shuō)明。便于程序員用于快速參考。當(dāng)然，最有經(jīng)驗(yàn)的開(kāi)發(fā)人員對(duì)這些操作很熟悉，但我認(rèn)為這是一個(gè)很好的方法幫助初學(xué)者理解這些函數(shù)，他可以幫助你使用簡(jiǎn)單的語(yǔ)法,完成復(fù)雜的操作.2015-04-04
Javascript中setTimeOut和setInterval的定時(shí)器用法
這篇文章主要介紹了Javascript中setTimeOut和setInterval的定時(shí)器用法的相關(guān)資料,需要的朋友可以參考下2015-06-06
項(xiàng)目中常遇到輸入框檢查的需求，比如即時(shí)搜索，用change事件？change事件失去焦點(diǎn)才發(fā)生，無(wú)法做到即時(shí)。keypresss事件？能監(jiān)聽(tīng)到鍵盤，但監(jiān)聽(tīng)不到鼠標(biāo)復(fù)制粘貼，不完美2014-09-09
IE的有條件注釋是一種專有的（因此是非標(biāo)準(zhǔn)的）、對(duì)常規(guī)（X）HTML注釋的Miscrosoft擴(kuò)展。2009-08-08
js中的onchange和onpropertychange (onchange無(wú)效的解決方法)
這篇文章主要介紹了js中的onchange和onpropertychange (onchange無(wú)效的解決方法)，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-03-03
下面小編就為大家?guī)?lái)一篇淺談JS中的bind方法與函數(shù)柯里化。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08