IconFont的作用就是用字體的格式來取代圖片、特殊字體的展示，用得比較多的就是一些純色的圖標，具體主要由當前css3屬性里的自定義字體(@font-face)來實現。
1.首先在Iconfont-阿里巴巴矢量圖標庫上面將你需要的圖標點擊購物車按鈕加入“暫存架”；
2.選擇完所有要用的圖標后“添加至項目”，給它命名。然后在“圖標管理－我的項目”中找到這個項目，查看在線代碼，把里面的代碼復制到CSS中。
3.每次添加圖標都要重新生成@font-face代碼，否則新圖標不能使用。
第一步：拷貝項目下面生成的font-face
@font-face { font-family: 'iconfont'; /* project id 209539 */ src: url('//at.alicdn.com/t/font_4yyty9qjdzpvi.eot'); src: url('//at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_4yyty9qjdzpvi.woff') format('woff'), url('//at.alicdn.com/t/font_4yyty9qjdzpvi.ttf') format('truetype'), url('//at.alicdn.com/t/font_4yyty9qjdzpvi.svg#iconfont') format('svg'); }
要在// 前加上http: 以上代碼使用如下
@font-face { font-family: 'iconfont'; /* project id 209539 */ src: url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot'); src: url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.woff') format('woff'), url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.ttf') format('truetype'), url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.svg#iconfont') format('svg'); }
第二步：定義使用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"></i> <i class="iconfont"></i>
代碼如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> @font-face { font-family: 'iconfont'; /* project id 209539 */ src: url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot'); src: url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.eot?#iefix') format('embedded-opentype'), url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.woff') format('woff'), url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.ttf') format('truetype'), url('http://at.alicdn.com/t/font_4yyty9qjdzpvi.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; } </style> </head> <body> <i class="iconfont"></i> <i class="iconfont"></i> <i class="iconfont"></i> </body> </html>
font-class引用
第一步：拷貝項目下面生成的fontclass代碼： css引入
//at.alicdn.com/t/font_4yyty9qjdzpvi.css
第二步：挑選相應圖標並獲取類名，應用於頁面：
<i class="iconfont icon-gouwuche"></i>
代碼如下：
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="http://at.alicdn.com/t/font_4yyty9qjdzpvi.css"> <title>Document</title> <style> .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; } </style> </head> <body> <i class="iconfont icon-lianjie"></i> <i class="iconfont icon-lajixiang"></i> <i class="iconfont icon-gouwuche"></i> </body> </html>