前端框架增加自定義fontIcons的方法

在這里主要介紹的是阿里巴巴的矢量圖標(biāo)管理網(wǎng)站（Iconfont.cn）灌曙，它也是國(guó)內(nèi)首家推廣Webfont形式圖標(biāo)的平臺(tái)外傅。Iconfont平臺(tái)為用戶(hù)提供在線圖標(biāo)搜索摸袁、圖標(biāo)分撿下載婉称、在線儲(chǔ)存忙迁、矢量格式轉(zhuǎn)換设预、個(gè)人圖標(biāo)庫(kù)管理及項(xiàng)目圖標(biāo)管理等基礎(chǔ)功能徙歼。在這里分三點(diǎn)進(jìn)行說(shuō)明。

一、圖標(biāo)制作制作

設(shè)計(jì)師同學(xué)可以根據(jù)官方提供的設(shè)計(jì)規(guī)范進(jìn)行制作魄梯，工具是AI桨螺，制作完成導(dǎo)出的時(shí)候需要另存為SVG格式。
制作完成就需要進(jìn)行下一步上傳操作酿秸。

二灭翔、個(gè)人圖標(biāo)管理

Iconfont.cn支持設(shè)計(jì)自己上傳圖標(biāo)、收藏圖標(biāo)以及管理項(xiàng)目圖標(biāo)辣苏。

1肝箱、上傳圖標(biāo)

在iconfont.cn平臺(tái)的導(dǎo)航上有一個(gè)[圖片上傳失敗...(image-e97543-1548557083453)] 上傳圖標(biāo) 入口，點(diǎn)擊該入口進(jìn)入上傳流程稀蟋，選擇您要上傳的SVG格式圖標(biāo)煌张。
由于圖標(biāo)存在iconfont.cn平臺(tái)上搜索需要通過(guò)關(guān)鍵詞和tag才能查詢(xún)到圖標(biāo)，所以在上傳圖標(biāo)的時(shí)候需要命名圖標(biāo)的名字和定義圖標(biāo)的tag退客。

2骏融、管理圖標(biāo)

打開(kāi)首頁(yè)導(dǎo)航的‘圖標(biāo)管理’按鈕，進(jìn)入圖標(biāo)管理界面井辜，以供查看“我上傳的圖標(biāo)”绎谦、“我收藏的圖標(biāo)”管闷、“項(xiàng)目管理圖標(biāo)”粥脚、“我的公開(kāi)圖標(biāo)庫(kù)”等分類(lèi)。
用戶(hù)可以在這里上傳刪除圖標(biāo)包个，收藏圖標(biāo)刷允，進(jìn)行圖標(biāo)的分類(lèi)管理。圖標(biāo)分類(lèi)管理是為了在實(shí)際項(xiàng)目中應(yīng)用碧囊，這也是這篇博客的重點(diǎn)树灶。

三、圖標(biāo)應(yīng)用

fontIcons對(duì)于前端應(yīng)用來(lái)說(shuō)有很多便捷：

只有變化大信炊天通；
自由改變顏色；
可以添加一些視覺(jué)效果熄驼，如陰影像寒、旋轉(zhuǎn)、透明度等等css3效果瓜贾；
兼容IE6诺祸。

下面介紹圖標(biāo)應(yīng)用的步驟：

1、搜索圖標(biāo)

搜索找到自己需要的圖標(biāo)祭芦，點(diǎn)擊會(huì)進(jìn)入右上角的購(gòu)物車(chē)中（可多選）筷笨，見(jiàn)下圖
[圖片上傳失敗...(image-87cc37-1548557083453)]

2、項(xiàng)目管理

點(diǎn)擊存儲(chǔ)為項(xiàng)目,輸入項(xiàng)目名稱(chēng),如"mui-icon-add",點(diǎn)擊存儲(chǔ)后,會(huì)跳轉(zhuǎn)到項(xiàng)目管理頁(yè)面.

項(xiàng)目管理

3、下載字體

點(diǎn)擊下載到本地,會(huì)將合并后的字體文件和自動(dòng)生成的css文件全部下載到本地.

字體文件

4胃夏、修改css

默認(rèn)的如下:
<pre class=" prettyprint css prettyprinted"><code>@font-face {font-family: "iconfont";

src: url('iconfont.eot'); /* IE9/

src: url('iconfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /

url('iconfont.woff') format('woff'), / chrome轴或、firefox /

url('iconfont.ttf') format('truetype'), / chrome、firefox仰禀、opera侮叮、Safari, Android, iOS 4.2+/

url('iconfont.svg#iconfont') format('svg'); / iOS 4.1- */

}



.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;

}



.icon-nanzhuang:before { content: "\e600"; }



.icon-nvzhuang:before { content: "\e601"; }



.icon-gouwuche:before { content: "\e602"; }

</code></pre>

我們可稍作修改,

為保證和框架目錄結(jié)構(gòu)統(tǒng)一，建議將字體文件放在fonts目錄下悼瘾，這樣我們需要修改@font-face下得url屬性囊榜；
字體文件類(lèi)名需要和其他字體文件保持一致，方便調(diào)用亥宿。
只兼容iOS和Android版本的話卸勺，我們僅需要ttf格式的字體即可，其它字體可以刪除烫扼；同時(shí)曙求，我們也僅需保留-webkit前綴語(yǔ)法，-moz前綴部分可以刪除映企；

修改后的代碼如下:

<pre class=" prettyprint css prettyprinted"><code> @font-face {font-family: "iconfont";

src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome悟狱、firefox、opera堰氓、Safari, Android, iOS 4.2+*/

}



.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

}



.icon-nanzhuang:before { content: "\e600"; }



.icon-nvzhuang:before { content: "\e601"; }



.icon-gouwuche:before { content: "\e602"; }

</code></pre>

將iconfont.css及iconfont.ttf兩個(gè)文件分別拷貝到mui工程css及fonts目錄下挤渐，然后即可在框架中引用剛生成的字體圖.
以mui框架為例，新增的字體應(yīng)用在標(biāo)簽內(nèi)代碼如下：

<span class="mui-icon iconfont icon-nanzhuang"></span>

以上完双絮！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末浴麻，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子囤攀，更是在濱河造成了極大的恐慌软免，老刑警劉巖，帶你破解...
沈念sama閱讀 221,198評(píng)論 6贊 514
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件焚挠，死亡現(xiàn)場(chǎng)離奇詭異膏萧，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)蝌衔，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 94,334評(píng)論 3贊 398
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門(mén)榛泛，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人胚委，你說(shuō)我怎么就攤上這事挟鸠。” “怎么了亩冬？”我有些...
開(kāi)封第一講書(shū)人閱讀 167,643評(píng)論 0贊 360
道士緝兇錄：失蹤的賣(mài)姜人
文/不壞的土叔我叫張陵艘希，是天一觀的道長(zhǎng)硼身。經(jīng)常有香客問(wèn)我，道長(zhǎng)覆享，這世上最難降的妖魔是什么佳遂？我笑而不...
開(kāi)封第一講書(shū)人閱讀 59,495評(píng)論 1贊 296
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮撒顿，結(jié)果婚禮上丑罪，老公的妹妹穿的比我還像新娘。我一直安慰自己凤壁，他們只是感情好吩屹，可當(dāng)我...
茶點(diǎn)故事閱讀 68,502評(píng)論 6贊 397
惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
文/花漫我一把揭開(kāi)白布。她就那樣靜靜地躺著拧抖，像睡著了一般煤搜。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上唧席，一...
開(kāi)封第一講書(shū)人閱讀 52,156評(píng)論 1贊 308
城市分裂傳說(shuō)
那天擦盾，我揣著相機(jī)與錄音，去河邊找鬼淌哟。笑死迹卢，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的徒仓。我是一名探鬼主播腐碱，決...
沈念sama閱讀 40,743評(píng)論 3贊 421
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼蓬衡！你這毒婦竟也來(lái)了喻杈？” 一聲冷哼從身側(cè)響起，我...
開(kāi)封第一講書(shū)人閱讀 39,659評(píng)論 0贊 276
萬(wàn)榮殺人案實(shí)錄
序言：老撾萬(wàn)榮一對(duì)情侶失蹤狰晚，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后缴啡，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體壁晒，經(jīng)...
沈念sama閱讀 46,200評(píng)論 1贊 319
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,282評(píng)論 3贊 340
?白月光啟示錄
正文我和宋清朗相戀三年业栅，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了秒咐。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,424評(píng)論 1贊 352
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡碘裕，死狀恐怖携取，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情帮孔，我是刑警寧澤雷滋，帶...
沈念sama閱讀 36,107評(píng)論 5贊 349
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布不撑，位于F島的核電站，受9級(jí)特大地震影響晤斩，放射性物質(zhì)發(fā)生泄漏焕檬。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,789評(píng)論 3贊 333
男人毒藥：我在死后第九天來(lái)索命
文/蒙蒙一澳泵、第九天我趴在偏房一處隱蔽的房頂上張望实愚。院中可真熱鬧，春花似錦兔辅、人聲如沸腊敲。這莊子的主人今日做“春日...
開(kāi)封第一講書(shū)人閱讀 32,264評(píng)論 0贊 23
一樁弒父案维苔，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽(yáng)兔仰。三九已至，卻和暖如春蕉鸳，著一層夾襖步出監(jiān)牢的瞬間乎赴，已是汗流浹背。一陣腳步聲響...
開(kāi)封第一講書(shū)人閱讀 33,390評(píng)論 1贊 271
情欲美人皮
我被黑心中介騙來(lái)泰國(guó)打工潮尝，沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留榕吼，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,798評(píng)論 3贊 376
代替公主和親
正文我出身青樓勉失，卻偏偏與公主長(zhǎng)得像羹蚣，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子乱凿，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,435評(píng)論 2贊 359