今日，心情甚是煩悶，原由…
公司項(xiàng)目需要將字體圖標(biāo)做一些細(xì)微的調(diào)整，我一人分析了許久，看不大懂源碼的邏輯，產(chǎn)生了自我懷疑。深吸一口氣，重新鼓起勇氣，調(diào)整心境，一下子豁然開朗，所以決定寫一份字體圖標(biāo)部署的教程，以此吸取教訓(xùn)和總結(jié)經(jīng)驗(yàn)

1.前置知識(shí)

當(dāng)我們從阿里巴巴矢量庫將自己需要的圖標(biāo)都添加到項(xiàng)目中后【或者公司的UI已經(jīng)為我們準(zhǔn)備好了包含所需圖標(biāo)的項(xiàng)目】

• 我們需要先把項(xiàng)目下載到本地
• 接下來將下載下來的文件解壓，打開文件夾，找到以下文件
  
• 將上方紅色框里面的所有文件都替換到項(xiàng)目的iconfont文件中【一般是在項(xiàng)目工程的project/assets/fonts/…目錄下面】，自己找找看看都會(huì)找到的
  
• 所有字體文件都替換結(jié)束后，我們就得到一個(gè)全新的iconfont.css文件，里面使用偽類選擇器，將類選擇器與圖標(biāo)字體建立聯(lián)系，比如放大圖標(biāo)，他的unicode值是e674,在 iconfont.css代碼中.icon-fangda就代表著unicode值為e674的放大圖標(biāo)
  

iconfont.css代碼的一部分

.icon-fuzhi:before {content: "\e672";
}.icon-suoxiao:before {content: "\e673";
}.icon-fangda:before {content: "\e674";
}

2.遇到的問題

UI需要將項(xiàng)目左側(cè)的圖標(biāo)替換成右側(cè)圖標(biāo)，可是我看起來并沒有太大的區(qū)別，可能UI有它自己的想法

核心代碼

循環(huán)遍歷每一個(gè)圖標(biāo)，通過class動(dòng)態(tài)綁定樣式，可能大家看到a-tooptip會(huì)覺得這是個(gè)什么東西，不要擔(dān)心，我們可以把它看成一個(gè)普通的組件，本文不對(duì)它做出討論…，代碼的關(guān)鍵之處在于span標(biāo)簽綁定的動(dòng)態(tài)樣式，以放大圖標(biāo)為例，span對(duì)應(yīng)的class值為 icon-fangda，而 icon-fangda就代表著放大圖標(biāo)，span 標(biāo)簽內(nèi)部::before元素就是我們需要的放大圖標(biāo)【相信從頭看下來的小伙伴們已經(jīng)懂了】

<template v-for="item of tools"><a-tooltip placement="right" :title="item.name" :overlay-style="{ maxWidth: '100%' }"><span :class="item.icon"></span></a-tooltip></template>

圖標(biāo)數(shù)據(jù)

  tools: [{key: 'zoomIn',icon:'icon-fangda',name: `放大 ${optionsText}+加號(hào)；${optionsText}+鼠標(biāo)滾輪`,},{key: 'zoomOut',icon:'icon-suoxiao',name: `縮小 ${optionsText}+減號(hào)；${optionsText}+鼠標(biāo)滾輪`,},{key: 'copy',icon: 'icon-fuzhi',name: `復(fù)制當(dāng)前圖片標(biāo)注信息 ${optionsText}+C`,},{key: 'icon-niantie',icon: 'icon-niantie',name: `粘貼已復(fù)制標(biāo)注信息 ${optionsText}+V`,},{ key: 'delete', icon: 'icon-lajitong', name: '刪除' },],