1、通過(guò)阿里圖標(biāo)庫(kù)官網(wǎng)登錄并搜索所需圖標(biāo)，加入購(gòu)物車(chē)后創(chuàng)建項(xiàng)目；2、下載包含字體與CSS的壓縮包并解壓至項(xiàng)目資源目錄；3、在網(wǎng)頁(yè)HTML中引入CSS文件并通過(guò)類(lèi)名使用圖標(biāo)；4、小程序需將字體轉(zhuǎn)base64并修改樣式表后綴為.wxss或.acss后導(dǎo)入全局樣式。
如果您需要在項(xiàng)目中引入自定義的矢量圖標(biāo)，但找不到穩(wěn)定且易于使用的資源平臺(tái)，則很可能是未使用專業(yè)的圖標(biāo)庫(kù)服務(wù)。以下是通過(guò)阿里圖標(biāo)庫(kù)官網(wǎng)入口進(jìn)行操作的詳細(xì)步驟：
本文運(yùn)行環(huán)境：MacBookPro，macOSSonoma
一、訪問(wèn)并登錄官網(wǎng)
阿里圖標(biāo)庫(kù)以項(xiàng)目形式管理圖標(biāo)，必須登錄后才能創(chuàng)建和管理個(gè)人項(xiàng)目。
1、打開(kāi)瀏覽器，訪問(wèn)https://www.iconfont.cn/官網(wǎng)地址。
2、點(diǎn)擊頁(yè)面右上角的“登錄”按鈕，使用手機(jī)號(hào)或第三方賬號(hào)完成身份驗(yàn)證。
二、搜索與添加圖標(biāo)
將所需圖標(biāo)加入購(gòu)物車(chē)是創(chuàng)建自定義圖標(biāo)的必要前置步驟。
1、在首頁(yè)搜索框輸入您需要的圖標(biāo)關(guān)鍵詞，例如“用戶”、“設(shè)置”等。
2、瀏覽搜索結(jié)果，將鼠標(biāo)懸停在目標(biāo)圖標(biāo)上，點(diǎn)擊出現(xiàn)的“加入購(gòu)物車(chē)”按鈕。
3、重復(fù)此操作，直至所有需要的圖標(biāo)均已添加至購(gòu)物車(chē)。
三、創(chuàng)建并管理項(xiàng)目
項(xiàng)目是圖標(biāo)文件打包下載的單位，所有選中的圖標(biāo)需先歸入同一項(xiàng)目。
1、點(diǎn)擊頁(yè)面右上角的購(gòu)物車(chē)圖標(biāo)，打開(kāi)購(gòu)物車(chē)側(cè)邊欄。
2、點(diǎn)擊“添加至項(xiàng)目”按鈕，若無(wú)現(xiàn)有項(xiàng)目，選擇“新建項(xiàng)目”。
3、輸入項(xiàng)目名稱（建議使用英文無(wú)空格），選擇字體前綴如icon-，點(diǎn)擊確認(rèn)。
四、下載圖標(biāo)文件包
成功創(chuàng)建項(xiàng)目后，可將包含CSS、字體文件和示例頁(yè)的完整包下載到本地。
1、系統(tǒng)會(huì)自動(dòng)跳轉(zhuǎn)至“我的項(xiàng)目”頁(yè)面，找到您剛創(chuàng)建的項(xiàng)目。
2、點(diǎn)擊“下載至本地”按鈕，獲取一個(gè)名為iconfont.zip的壓縮文件。
3、解壓該文件，并將其放入您開(kāi)發(fā)項(xiàng)目的靜態(tài)資源目錄下，例如/assets/fonts/。
五、在網(wǎng)頁(yè)中引入圖標(biāo)
通過(guò)標(biāo)準(zhǔn)的link標(biāo)簽引入CSS文件，即可在HTML中使用圖標(biāo)類(lèi)名調(diào)用。
1、將項(xiàng)目根目錄下的iconfont.css文件路徑配置正確。
2、在HTML文件的
區(qū)域添加：3、使用格式為
六、在小程序中特殊處理
由于小程序不支持外鏈字體，必須將字體文件轉(zhuǎn)換為base64并修改樣式表后綴。
1、進(jìn)入在線轉(zhuǎn)換網(wǎng)站https://transfonter.org/，上傳iconfont.ttf文件并勾選生成base64選項(xiàng)。
2、將生成的stylesheet.css內(nèi)容復(fù)制，替換原iconfont.css中的@font-face規(guī)則。
3、將修改后的CSS文件重命名為iconfont.wxss（微信小程序）或iconfont.acss（支付寶小程序），并導(dǎo)入app.wxss或app.acss全局樣式文件中。
以上就是阿里圖標(biāo)庫(kù)官網(wǎng)入口_阿里圖標(biāo)庫(kù)官網(wǎng)入口最新穩(wěn)定跳轉(zhuǎn)的詳細(xì)內(nèi)容，！
