生活随笔
收集整理的這篇文章主要介紹了
开发辅助 | 阿里图标库iconfont入门使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
目前大多數(shù)的互聯(lián)網(wǎng)公司，前端開發(fā)和UI設(shè)計(jì)師配合中，針對(duì)設(shè)計(jì)師給圖的效果圖，前端開發(fā)工程師不再像往常一樣對(duì)于細(xì)小圖標(biāo)進(jìn)行切圖，取而代之的是引用阿里圖標(biāo)庫(kù)（http://iconfont.cn/）；簡(jiǎn)單的臨時(shí)開發(fā)或者活動(dòng)頁(yè)，直接下載使用即可（場(chǎng)景1），對(duì)于周期性的項(xiàng)目開發(fā)，以及后期需要長(zhǎng)期運(yùn)營(yíng)的大中型項(xiàng)目（場(chǎng)景2），個(gè)人還是建議在項(xiàng)目中添加iconfont項(xiàng)目；
?使用場(chǎng)景 一： 單個(gè)圖標(biāo)直接引用
注冊(cè)iconfont賬號(hào)后，如果只使用單個(gè)icon，直接下載
添加購(gòu)物車；下載素材，設(shè)置顏色、大小、格式
下載解壓后，直接使用即可
此種方式適合用在圖標(biāo)引用特別少，以后也不需要特別維護(hù)的場(chǎng)景：
- 比如設(shè)計(jì)師用來(lái)做demo原型。
- 前端臨時(shí)做個(gè)活動(dòng)頁(yè)。
- 當(dāng)然如果你只是為了下載圖標(biāo)做PPT,也是極好的。
- 不過(guò)如果是成體系的應(yīng)用使用，建議把icon加入項(xiàng)目，然后使用下面三種推薦的方式。
?
?
使用場(chǎng)景 二：大中型項(xiàng)目中使用 - font-class引用
tips：該方法較為常用，之前淘寶網(wǎng)用此方法實(shí)現(xiàn)所有頁(yè)面圖標(biāo)，目前我們公司正式使用這種方式引入圖標(biāo)，特點(diǎn)如下：
- 兼容性好，支持ie8 ，及所有現(xiàn)代瀏覽器。
- 支持按字體的方式去動(dòng)態(tài)調(diào)整圖標(biāo)大小，顏色等等。
- 語(yǔ)義明確，本質(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的，需要在加入iconfont項(xiàng)目之前選上所需的顏色；
使用步驟：
“圖標(biāo)管理”--“我的項(xiàng)目”--“新建項(xiàng)目”，首頁(yè)搜索，將選中的圖標(biāo)添加到購(gòu)物車，在購(gòu)物車中添加到項(xiàng)目；下載解壓后，打開iconfont.css, src引用只改成base64格式的引用，引入項(xiàng)目index中使用注意：當(dāng)在iconfont的項(xiàng)目中新添加了icon，需要重新下載，覆蓋之前的url和類
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>test
</title>
6 <style>
7 @font-face {font-family: "iconfont";
8 src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAUgAAsAAAAAB2gAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kjpY21hcAAAAYAAAABdAAABhp0wBr5nbHlmAAAB4AAAAUkAAAFU7 23n2hlYWQAAAMsAAAAMQAAADYQ292haGhlYQAAA2AAAAAgAAAAJAfeA35obXR4AAADgAAAAAwAAAAMC r/92xvY2EAAAOMAAAACAAAAAgAdgCqbWF4cAAAA5QAAAAfAAAAIAESAF1uYW1lAAADtAAAAUUAAAJtPlT fXBvc3QAAAT8AAAAIQAAADJpgudveJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sk4gYGVgYOpk kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDz7x9zwv4EhhrmBoQEozAiSAwA2iQ1reJzFkMENgDAMAy9t6QMxCA8G4sUcnbhjtJhQHkxQS44Vx1KiAAsQxUNMYBfGg1OuuR9Z3U eyVIjUGrrXf2nimiWXYNKZhps3uo/Nq/76PQVyqBOrO0l4QbfrQ HAAAAeJwVTr1OwmAA/K6lpSBt7dc/WihtqVAJCOHXwfAzuGAcTJxMXFxNdGVxYDFxcPAZDImPIAOD0ccwDAYXFxcHnYrl7nLJJZfcEY6Q9Qe7YLNEJbukSQ7JCSHgqyhKjAM/7NSZKnSf001NYsMg9JNBsc72YRZ5zWj1OmWTT/IyJBTQ9lu9sM6E6HYGzAFahgNYOfuUlvKUfUA6GxZuoyPmEbob5OXBXjSuDbWWpwqTDKUWpfcCz3ECwyRkCVemkeJSaT6acbKtL9wK4yJjhfbxmejl6MVd59opmSlgOoWa86SnoWIrsW5sQ6VWclsUsrYY7GiYfG5l1YxTXpEYWP uZwmBPSdOHMoN1LH5zhtmWykgtpgD7G M/avNV7SvNudLxfdHqHjvb0u3glGQx2Xj9ZtC7b58aS6iZ68CiNFPXMEYXjzzDw4PPAsAAAB4nGNgZGBgAOIZqkpp8fw2Xxm4WRhA4Nq9M5dg9P/v/5ewcDDHALkcDEwgUQBf A2oAAAAeJxjYGRgYG7438AQw8L4//v/nywcDEARFMAMAKAqBmMEAAAAA kAAAQB//cAAAAAAHYAqnicY2BkYGBgZghkYGUAASYg5gJCBob/YD4DABD3AXAAeJxlj01OwzAQhV/6B6QSqqhgh QFYgEo/RGrblhUavdddN mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAmZGJkZmRhYGxgiUjPzeVgQEADl8CQgAAAA==') format('woff')
9 }
10
11 .iconfont {
12 font-family:"iconfont" !important;
13 font-size:16px;
14 font-style:normal;
15 -webkit-font-smoothing: antialiased;
16 -moz-osx-font-smoothing: grayscale;
17 }
18
19 .icon-home:before { content: "\e6fe"; }
20 </style>
21 </head>
22 <body>
23 <i class="iconfont icon-home"></i>
24 </body>
25 </html> View Code
?
其他：symbol引用
這是一種全新的使用方式，應(yīng)該說(shuō)這才是未來(lái)的主流，也是平臺(tái)目前推薦的用法；
這種用法其實(shí)是做了一個(gè)svg的集合，與上面兩種相比具有如下特點(diǎn)：
- 支持多色圖標(biāo)了，不再受單色限制。
- 通過(guò)一些技巧，支持像字體那樣，通過(guò)font-size,color來(lái)調(diào)整樣式。
- 兼容性較差，支持 ie9 ,及現(xiàn)代瀏覽器。
- 瀏覽器渲染svg的性能一般，還不如png。
tips：
（1）由于只支持ie9以上的瀏覽器，瀏覽器渲染svg的性能一般，還不如png，所以推薦font-class引用方式；
（2）由于現(xiàn)在大部分的公司都是要兼容IE8的，等將來(lái)有一天大家心照不宣放棄可惡的IE，或只支持IE9以上的話，可以使用該方式
（3）帖子提煉于iconfont官方使用幫助 http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4382a&helptype=code
（4）歡迎批評(píng)指正 wx：boan910227
?
總結(jié)
以上是生活随笔為你收集整理的开发辅助 | 阿里图标库iconfont入门使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
