摘要:字體圖標(biāo)導(dǎo)入與使用進(jìn)入官網(wǎng)點(diǎn)擊鏈接進(jìn)入官網(wǎng)進(jìn)入官網(wǎng),默認(rèn)會(huì)生成一套圖標(biāo)文件,如果不需要可以將所有的文件進(jìn)行刪除。通過操作按鈕修改圖標(biāo)的描述排序等相關(guān)信息。圖標(biāo)對(duì)應(yīng)的進(jìn)制編碼也不能重復(fù),編碼與圖標(biāo)是一一對(duì)應(yīng)關(guān)系。項(xiàng)目文件,可用于導(dǎo)入。
icomoon字體圖標(biāo)導(dǎo)入與使用 進(jìn)入icomoon官網(wǎng)
點(diǎn)擊鏈接進(jìn)入icomoon官網(wǎng)
進(jìn)入官網(wǎng),默認(rèn)會(huì)生成一套圖標(biāo)文件,如果不需要可以將所有的文件進(jìn)行刪除。具體操作如下圖所示。
會(huì)員用戶可以通過賬號(hào)存儲(chǔ)圖標(biāo)的信息,非會(huì)員用戶只能通過瀏覽器的在本地存儲(chǔ)相應(yīng)的圖標(biāo)信息,故普通用戶勁量在同一個(gè)瀏覽器上面去編輯圖標(biāo)庫,有需要的情況下將所有的svg圖標(biāo)進(jìn)行導(dǎo)出備份。導(dǎo)入圖標(biāo) 1. 點(diǎn)擊import Icons按鈕,選擇自己的圖標(biāo)進(jìn)行導(dǎo)入。 2. 圖標(biāo)導(dǎo)入后,選擇需要生成字體庫的圖標(biāo),默認(rèn)所有的圖標(biāo)是不選中的。 3. 通過操作按鈕修改圖標(biāo)的描述排序等相關(guān)信息。 4. 選中修改按鈕,點(diǎn)擊任意圖標(biāo),彈出信息修改框。 5. 勾選完所需要的圖標(biāo)后點(diǎn)擊Generate Font生成字體文件。 6. 在此頁還是可以對(duì)圖標(biāo)的最終信息進(jìn)行編輯。
字體庫項(xiàng)目編輯 1. 點(diǎn)擊項(xiàng)目管理按鈕,進(jìn)入項(xiàng)目管理界面 2. 如圖示可對(duì)項(xiàng)目進(jìn)行相應(yīng)的操作 字體庫文件使用所有圖標(biāo)的名稱不能重復(fù),圖標(biāo)名稱用于最終的css類名稱。
圖標(biāo)對(duì)應(yīng)的16進(jìn)制編碼也不能重復(fù),編碼與圖標(biāo)是一一對(duì)應(yīng)關(guān)系。
最后生成的字體文件都會(huì)對(duì)圖標(biāo)默認(rèn)加上icon-的前綴。
下載后解壓到本地,會(huì)有如圖多個(gè)文件,項(xiàng)目中需要使用的文件就fonts文件夾下的字體文件,style.css樣式文件即可。
demo-files,demo.html demo示例文件。
fonts 字體文件。
Read Me.txt 說明文件。
selection.json iconmoon項(xiàng)目文件,可用于導(dǎo)入。
style.css 項(xiàng)目中需要用到的樣式文件。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/103753.html
摘要:問題微信小程序不能隨意使用網(wǎng)絡(luò)資源,如字體文件等不能在小程序中使用字體文件不能使用背景圖片定位來使用內(nèi)部圖片下面就介紹一下如何制作字體圖標(biāo)。簡易方式通過兩個(gè)在線工具,很容易地生成加密的字體圖標(biāo)。 問題: 1.微信小程序不能隨意使用網(wǎng)絡(luò)資源,如字體,css文件等 2.不能在小程序中使用字體文件 3.不能使用background-position背景圖片定位來使用內(nèi)部png圖片 下面就介紹...
摘要:自己制作字體圖標(biāo)的時(shí)候有需要注意這些阿里圖標(biāo)庫的圖標(biāo)多,免費(fèi)但是編輯器不如好用。建議設(shè)計(jì)師對(duì)于一些常用圖標(biāo)直接去阿里圖標(biāo)庫找,下載文件即可。 優(yōu)點(diǎn) 下面的簡介來自,著名字體圖標(biāo)庫Font Awesome的首頁,http://fontawesome.io: Font Awesome gives you scalable vector icons that can instantly b...
閱讀 931·2021-11-24 09:38
閱讀 947·2021-11-23 09:51
閱讀 2956·2021-11-16 11:44
閱讀 1785·2021-09-22 15:52
閱讀 1688·2021-09-10 11:20
閱讀 1412·2019-08-30 13:47
閱讀 1309·2019-08-29 12:36
閱讀 3341·2019-08-26 10:43