基礎(chǔ)環(huán)境
1.使用的矢量圖標(biāo)庫：http://www.iconfont.cn/
2.需要賬號(hào)登陸 硫眯，名下會(huì)有對(duì)應(yīng)的工程項(xiàng)目組
3.對(duì)接設(shè)計(jì)師和所在工程的矢量圖標(biāo)交接
如何使用
1.設(shè)計(jì)師會(huì)把做好的矢量圖標(biāo)上傳到名下的工程里，前端開發(fā)需要選中需要的圖標(biāo)
2. 選中的矢量圖標(biāo)懦冰，需要手動(dòng)添加到對(duì)應(yīng)的工程項(xiàng)目中
3.完成添加
使用格式
1.svg
選擇SVG的時(shí)候，需要先切換格式：Symbol
使用文件是JS文件鳖藕，在head的文件中：script(src="http://at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.js")
矢量圖標(biāo)下方會(huì)出現(xiàn)對(duì)應(yīng)的ID浅萧，利用的時(shí)候需要利用ID
代碼中使用，需要利用：use(xlink:href="#icons-shengri1")偏序，將JS文件中的對(duì)應(yīng)圖標(biāo)畫出來
2.unicode
選擇unicode的時(shí)候续膳，需要先切換格式：unicode
使用的是CSS：
@font-face {
font-family: 'iconfont';? /* project id 188309 */
src: url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.eot');
src: url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.woff') format('woff'),
url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_188309_1w33yowbqzhhncdi.svg#iconfont') format('svg');
}
對(duì)iconfont需要定義基礎(chǔ)的樣式：
.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;
}
矢量圖標(biāo)下方會(huì)出現(xiàn)對(duì)應(yīng)的unicode改艇，引入CSS和HTML中是不同長(zhǎng)度的值：
html：
CSS：.icon-paixu:before{content:"\e603"; }
對(duì)于unicode用法中：
使用css偽元素和插入Html兩種方式中，優(yōu)選插入Html
原因：
偽元素在使用中的步驟坟岔，是先找到偽類的父元素谒兄，然后再里面生成偽元素，引入iconfont的相關(guān)信息社付。
而當(dāng)css文件不生效或是錯(cuò)誤時(shí)承疲，頁面不會(huì)出現(xiàn)圖標(biāo)的錯(cuò)誤占位，沒有提示
