背景

在我們做日常項(xiàng)目時(shí)，通常會(huì)用到icon圖標(biāo)或者是一些圖標(biāo)字體，阿里iconfont是我們選擇的較多的一種，下面我將會(huì)介紹使用方法和幾種常用的引用方式

iconfont新建項(xiàng)目

官網(wǎng)：https://www.iconfont.cn/? ?在首頁(yè)選擇【圖標(biāo)管理】-【我的項(xiàng)目】

點(diǎn)擊 【我的項(xiàng)目】

填寫(xiě)項(xiàng)目信息，即可完成新建一個(gè)項(xiàng)目?！綟ontClass/Symbol 前綴】和【Font Family】參數(shù)是自定義的，以后會(huì)與我們生成的代碼相關(guān)聯(lián)，默認(rèn)即可。

添加圖標(biāo)

新建好項(xiàng)目后，找到自己想要的圖標(biāo)，加入購(gòu)物車(chē)。

點(diǎn)擊頁(yè)面右上角的購(gòu)物車(chē)圖標(biāo)，打開(kāi)自己的購(gòu)物車(chē)，選擇添加至項(xiàng)目，我們就可以在自己的項(xiàng)目下看到添加的圖標(biāo)了。

在我們的項(xiàng)目下，可以對(duì)圖標(biāo)進(jìn)行編輯，如：大小、顏色、填充色，旋轉(zhuǎn)等操作。

Vue工程中引入iconfont

官方文檔：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code

根據(jù)官方文檔，有unicode引用、font-class引用、symbol引用三種引入方式，這三種方式又分有兩種情況：下載到本地引入，在線(xiàn)鏈接引入。在Iconfont網(wǎng)頁(yè)我們自己的項(xiàng)目下可以看到這些方式選擇。

unicode引用??不推薦

• 本地引入

unicode方式代碼量少，并不需要下載本地文件。

• 鏈接引入

unicode模式下的在線(xiàn)鏈接指的是font-face代碼。

在vue中，將項(xiàng)目生成的font-face代碼和自定義的iconfont樣式寫(xiě)在App.vue的style中，就可以在項(xiàng)目中引用圖標(biāo)了。此時(shí)樣式是全局作用的，如果想要實(shí)現(xiàn)圖標(biāo)不同的樣式，可以增加一層自定義樣式。

<i class="iconfont myIconStyle">&#xe64a;</i>

在”myIconStyle”樣式中修改color等屬性可以覆蓋全局的樣式，實(shí)現(xiàn)單個(gè)的樣式修改。

這里注意理解下，官方文檔說(shuō)的“不支持多色”，是指我們iconfont網(wǎng)頁(yè)項(xiàng)目中，就算有多色圖標(biāo)，引用的時(shí)候會(huì)自動(dòng)去色，統(tǒng)一變成默認(rèn)的顏色，不管你給圖標(biāo)一編輯了紅色圖標(biāo)二編輯了黃色，在項(xiàng)目中用unicode方式引用的時(shí)候都會(huì)變成默認(rèn)顏色，但是我們?nèi)匀豢梢酝ㄟ^(guò)修改css樣式實(shí)現(xiàn)圖標(biāo)顏色自定義，只是這個(gè)顏色編輯放在代碼層面來(lái)了。

font-class引用 推薦使用

?

如官方文檔所說(shuō)，font-class是為了讓程序更加直觀(guān)可讀，直接用unicode會(huì)造成閱讀困難。font-class模式關(guān)鍵在于生成的css文件。

• 本地引入

按照下圖選擇文件放入自己的項(xiàng)目中，vue中建議在assets文件夾下新建一個(gè)iconfont文件夾，放相關(guān)文件。

常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2

@font-face?{
??font-family: "iconfont"; /* Project id 2974228 */
??src: url('iconfont.woff2?t=1640340931514') format('woff2'),
? ? ??url('iconfont.woff?t=1640340931514') format('woff'),
? ? ??url('iconfont.ttf?t=1640340931514') format('truetype');}

再就是引入時(shí)，需要注意的是字體文件路徑引用是否準(zhǔn)確，否則打包可能不識(shí)別

然后在main.js中引入iconfont.css文件，就可以正常使用了。

import?'./assets/iconfont/iconfont.css'

• 鏈接引入

方式一：

在index.html頭部中，引入css文件即可

<link rel="stylesheet"?type="text/css"?href="http://at.alicdn.com/t/font_1160473_t1iruikumm.css">

方式二：

點(diǎn)開(kāi)css代碼鏈接

復(fù)制css代碼，在項(xiàng)目中粘貼到iconfont.css文件中 ，在App.vue或main.js中引入

import?'./assets/iconfont/iconfont.css'

注意：iconfont.css中url 官方默認(rèn)是cdn 鏈接, 打包時(shí)請(qǐng)改成http否則不識(shí)別

@font-face?{
??font-family: "iconfont"; /* Project id 2974228 */
??src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),
???????url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),
???????url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');}

打包后

@font-face?{
????font-family: "iconfont"; /* Project id 2400747 */
????src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),
????url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),
????url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');}

symbol引用?不推薦

• 本地引入

將下載好的iconfont.js文件放入自己的工程目錄，在main.js中引入，在App.vue中寫(xiě)好通用css代碼，即可使用。

import?'./assets/iconfont/iconfont.js'

這里注意一點(diǎn)，下載下來(lái)的js文件是壓縮過(guò)的，如果項(xiàng)目使用了eslint語(yǔ)法校驗(yàn)會(huì)瘋狂報(bào)錯(cuò)，可以在js文件開(kāi)頭加入?/* eslint-disable */來(lái)指定該文件不應(yīng)用eslint校驗(yàn)。

• 鏈接引入

在index.html頭部中，引入js文件即可

<script?src="http://at.alicdn.com/t/font_1160473_t1iruikumm.js"></script>

uni-app 引入iconfont圖標(biāo)

基本上引入方式跟上Vue相同，但是會(huì)遇到打包時(shí)圖標(biāo)引入不顯示的問(wèn)題，解決方式如下：

1.在iconfont.css中，需要使*~@* 將路徑添加完整

@font-face?{
??font-family: "iconfont"; /* Project id 2642111 */
??src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),
???????url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),
???????url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');}

2.在App.vue全局引入iconfont.css

<style>
/* 每個(gè)頁(yè)面公共css */
@import?url("~@/static/fonts/iconfont.css");
/* #ifdef MP-TOUTIAO */
/* #endif */
</style>

3.使用圖標(biāo)，在標(biāo)簽內(nèi)的class通過(guò)"iconfont icon-"添加下載好的圖標(biāo)即可

<view class="iconfont icon-yuangongguanli"></view>

或通過(guò)官方uni-icons 引入自定義圖標(biāo)

<uni-icons slot="icon"?customPrefix="iconfont"?class="icon-fenxiang"?color="#f8bd12"?size="20"/>

總結(jié)

? ? symbol引用最受官方推薦，也是最優(yōu)的方式，但是瀏覽器兼容不好，目前來(lái)看，前端需要兼容一些低版本的瀏覽器，所以如果考慮到用戶(hù)使用，不建議采用symbol引用。

? ? unicode引用瀏覽器兼容最好，但是可讀性差，font-class引用雖然兼容性比unicode引用差一點(diǎn)，但是提高可讀性，綜合來(lái)看，目前項(xiàng)目中還是采用font-class引用比較好。

? ??因?yàn)橐镁W(wǎng)絡(luò)資源的不穩(wěn)定，所以建議采用本地引入的方式。

? ? 如果在圖標(biāo)庫(kù)中新增加了圖標(biāo)，則需要更新在線(xiàn)鏈接并把該鏈接重新引入到實(shí)際項(xiàng)目中，或者重新下載代碼到本地，然后在實(shí)際項(xiàng)目中引入最新的iconfont文件。

? ??再就是引入時(shí)文件路徑的問(wèn)題，打包都需要注意。

點(diǎn)擊下方卡片/微信搜索，關(guān)注公眾號(hào)“天宇文創(chuàng)意樂(lè)派”(ID:gh_cc865e4c536b)

聽(tīng)說(shuō)點(diǎn)贊和關(guān)注本號(hào)的都找到漂亮的小姐姐了喲且年后必入百萬(wàn)呀??！

往期推薦

JavaScript 細(xì)節(jié)和一些實(shí)際應(yīng)用，了解一下

本文使用 文章同步助手 同步