阿里图标默认生成：三种格式： Unicode+Font class+Symbol，demo使用的是 Unicode
操作步骤：
1.搜索自己需要的图标，
2.添加到项目
3.复制代码（这里复制的是font-face的代码）
4.加入项目中的所有图标下面都会有一个代码，类似：
5.其他按照demo格式复制就可以了，fz20是自己定义的，您也可以自己定义颜色控制等等。
直接贴代码
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <meta charset="UTF-8"> <meta name="Author" content="haley"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>字体图标的使用demo</title> <style> /*线上font-face*/ @font-face { font-family: 'iconfont'; /* project id 207411 */ src: url('//at.alicdn.com/t/font_ndesiphink8uayvi.eot'); src: url('//at.alicdn.com/t/font_ndesiphink8uayvi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_ndesiphink8uayvi.woff') format('woff'), url('//at.alicdn.com/t/font_ndesiphink8uayvi.ttf') format('truetype'), url('//at.alicdn.com/t/font_ndesiphink8uayvi.svg#iconfont') format('svg'); } .iconfont{ font-family:"iconfont" !important; font-size:30px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke- 0.2px; -moz-osx-font-smoothing: grayscale; color:#fff; } .iconBox>p{ background: #00AEEF; padding:20px 10px; color:#fff; border:1px solid transparent; } .iconBox>p:hover{ background: #ffF; border-color:#00AEEF; color:#00AEEF; } .iconBox>p:hover .iconfont{ color:#00AEEF; } .fz20{ font-size: 20px; } .fz50{ font-size: 50px; } .fz100{ font-size: 100px; } </style> </head> <body> <div class="iconBox"> <p><i class="iconfont"></i> 英文</p> <p><i class="iconfont"></i> 中文</p> <p class="fz20"><i class="iconfont fz20"></i> 搜索 font-size:20px</p> <p class="fz50"><i class="iconfont fz50"></i> 搜索 font-size:50px</p> <p class="fz100"><i class="iconfont fz100"></i> 搜索 font-size:100px</p> </div> </body> </html>