字體圖標iconfont
阿里官網傳送門: http://www.iconfont.cn/
打開首頁的小圖標好漂亮哦
1)javascript
2)css
3)
選擇本身想要下載的格式點擊下載,下載素材和下載代碼的意思是不同的,這裏先演示下載素材。html
**下載素材:下載圖標資源,能夠指定顏色、大小以及格式
下載代碼:下載字體圖標的代碼(即便官網上的圖標是彩色的,應用到項目中也是黑白且大小不變的小圖標,等一下演示。),包括demo的html和css文件、iconfont的css、js以及各類字體文件。 添加至項目:創建一個本身的圖標庫,將圖標整合在一塊兒,方便後續應用在本身的實際項目中。**java
4)加在代碼中看一下效果web
1)隨便選擇幾個小圖標,添加到購物車。chrome
2)下載代碼瀏覽器
3)將壓縮包解壓,將iconfont.css添加到本身的項目中,而且在項目中引用這個css文件。svg
4)打開壓縮包中的demo_fontclass.html文件,會看見圖標的名字。性能
5)代碼加一下樣式字體
6)運行效果
顯示圖標是黑白的,如今將圖標放大點。
能夠知道,這種方式獲得的圖標的內容大小是不變的。
想要將圖表內容變大,能夠在iconfont.css文件中改動。將16px改爲50px。
1)將選擇的圖標添加至項目,若是已經添加過項目了,直接點擊就行了,以前沒添加過項目,給你的項目起一個名字。
右上角的「下載至本地」就是下載該圖標庫的代碼到本地,代碼包括demo的html和css文件、iconfont的css、js以及各類字體文件,demo是使用說明,iconfont文件是使用這個圖標庫所必須的文件,可根據使用的具體方式引用相應文件(就是剛纔說的下載代碼那種方式,不逼逼了)。
左上角的三種方式
Unicode、Fontclass、Symbol:三種使用的方式,在下載到本地的代碼中找到demo,demo的html文件中有這三種方式的詳細使用說明(我就直接將內容粘貼過來了 小聲逼逼o3o)。
注意:若是在圖標庫中新增長了圖標,則須要更新在線連接並把該連接從新引入到實際項目中,或者從新下載代碼到本地,而後在實際項目中引入最新的iconfont文件。
unicode是字體在網頁端最原始的應用方式,特色是:
兼容性最好,支持ie6+,及全部現代瀏覽器。
支持按字體的方式去動態調整圖標大小,顏色等等。
可是由於是字體,因此不支持多色。只能使用平臺裏單色的圖標,就算項目裏有多色圖標也會自動去色。
注意:新版iconfont支持多色圖標,這些多色圖標在unicode模式下將不能使用,若是有需求建議使用symbol的引用方式
unicode使用步驟以下:
第一步:拷貝項目下面生成的font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
**font-family: <YourWebFontName> :自定義字庫名稱(通常設置爲所引入的字庫名),後續樣式規則中則經過該名稱來引用該字庫。
src :設置字體的加載路徑和格式,經過逗號分隔多個加載路徑和格式
srouce :字體的加載路徑,能夠是絕對或相對URL。
format :字體的格式,主要用於瀏覽器識別,通常有如下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和以前使用的是一致的。
src屬性後還有一個 local(font name) 字段,表示從用戶系統中加載字體,失敗後才加載webfont。**
第二步:定義使用iconfont的樣式
.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; }
第三步:挑選相應圖標並獲取字體編碼,應用於頁面
<i class="iconfont">3</i>
"iconfont"是你項目下的font-family。能夠經過編輯項目查看,默認是"iconfont"。
2)font-class
font-class是unicode使用方式的一種變種,主要是解決unicode書寫不直觀,語意不明確的問題。
與unicode使用方式相比,具備以下特色:
兼容性良好,支持ie8+,及全部現代瀏覽器。
相比於unicode語意明確,書寫更直觀。能夠很容易分辨這個icon是什麼。
由於使用class來定義圖標,因此當要替換圖標時,只須要修改class裏面的unicode引用。
不過由於本質上仍是使用的字體,因此多色圖標仍是不支持的。
使用步驟以下:
第一步:引入項目下面生成的fontclass代碼:
<link rel="stylesheet" type="text/css" href="./iconfont.css">
第二步:挑選相應圖標並獲取類名,應用於頁面:
<i class="iconfont icon-xxx"></i>
"iconfont"是你項目下的font-family。能夠經過編輯項目查看,默認是"iconfont"。
Unicode方式和FontClass方式是極其類似的,只不過他們一個用的是圖標的字體編碼,一個用的是圖標的unicode引用而已
icon-xxx是使用了unicode引用的類名,可在下載的demo.html中查看,或者能夠在阿里矢量圖標庫的網站上,進入個人項目查看。xxx是圖標的名字,你能夠在網站上修改圖標的名字(FontClass和Symbol均可以),可是切記若是你使用了在線連接,則必須在網站上更新在線連接,而後將該連接更新到你的項目中,若是你是本地使用,則必須下載最新的代碼,而後更新到你的項目中,不然修改無效
能夠更改圖標名字,改能夠改圖標的樣式。
這是一種全新的使用方式,應該說這纔是將來的主流,也是平臺目前推薦的用法。相關介紹能夠參考這篇文章 這種用法實際上是作了一個svg的集合,與另外兩種相比具備以下特色:
支持多色圖標了,再也不受單色限制。
經過一些技巧,支持像字體那樣,經過font-size,color來調整樣式。
兼容性較差,支持 ie9+,及現代瀏覽器。
瀏覽器渲染svg的性能通常,還不如png。
使用步驟以下:
第一步:引入項目下面生成的symbol代碼:
<script src="./iconfont.js"></script>
第二步:加入通用css代碼(引入一次就行):
<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> 第三步:挑選相應圖標並獲取類名,應用於頁面: <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iconfont</title> <style type="text/css"> @font-face { /* 實際使用中是各用各的,這裏不想寫那麼多例子,因此就共用了一個,並不推薦這樣 */ font-family: "iconfont"; src: url('css/iconfont/iconfont.eot?t=1495209181038'); /* IE9*/ src: url('css/iconfont/iconfont.eot?t=1495209181038#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('css/iconfont/iconfont.woff?t=1495209181038') format('woff'), /* chrome, firefox */ url('css/iconfont/iconfont.ttf?t=1495209181038') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('css/iconfont/iconfont.svg?t=1495209181038#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-fengbiping:before { content: "\e60d"; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style> <script type="text/javascript" src="js/iconfont.js"></script> </head> <body> <div> <div><i class="iconfont"></i>Unicode</div> <div><i class="iconfont icon-fengbiping"></i>FontClass</div> <div style="font-size: 3em;"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fengbiping"></use> </svg> Symbol </div> </div> </body> </html>
綜合運用(在線連接)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iconfont</title> <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_824663_2xmiq46djp7.css"><!-- fontclass --> <style type="text/css"> @font-face { font-family: 'iconfont'; /* project id 824663 */ src: url('//at.alicdn.com/t/font_824663_2xmiq46djp7.eot'); src: url('//at.alicdn.com/t/font_824663_2xmiq46djp7.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_824663_2xmiq46djp7.woff') format('woff'), url('//at.alicdn.com/t/font_824663_2xmiq46djp7.ttf') format('truetype'), url('//at.alicdn.com/t/font_824663_2xmiq46djp7.svg#iconfont') format('svg'); } .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-sendMsg:before { content: "\e60c"; } .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } p{ color: #fff; } </style> <script type="text/javascript" src="http://at.alicdn.com/t/font_824663_2xmiq46djp7.js"></script><!-- Symbol --> </head> <body> <div> <div><i class="iconfont"></i>Unicode</div> <div><i class="iconfont icon-fengbiping"></i>FontClass</div> <div style="font-size: 3em;"> <svg class="icon" aria-hidden="true"> <use xlink:href="#icon-fengbiping"></use> </svg> Symbol </div> </div> </body> </html>