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