1.unicode引用
第一步:拷贝项目下面生成的font-face
@font-face {
font-family: 'iconfont'; /* project id 243273 */
src: url('//at.alicdn.com/t/font_k58etxg0bxn1m7vi.eot');
src: url('//at.alicdn.com/t/font_k58etxg0bxn1m7vi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_k58etxg0bxn1m7vi.woff') format('woff'),
url('//at.alicdn.com/t/font_k58etxg0bxn1m7vi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_k58etxg0bxn1m7vi.svg#iconfont') format('svg');
}
特别注意:src所引用的在线url需要加上协议(http或https或ftp)
第二步:定义使用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>
2.font-class引用
第一步:拷贝项目下面生成的fontclass代码
//at.alicdn.com/t/font_k58etxg0bxn1m7vi.css
特别注意:路径需要加协议
第二步:挑选相应图标并获取类名,应用于页面
<i class="iconfont icon-daohang"></i>
3.symbol引用
第一步:拷贝项目下面生成的symbol代码
//at.alicdn.com/t/font_k58etxg0bxn1m7vi.js
特别注意:路径需要加协议
第二步:加入通用css代码(引入一次就行)
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
第三步:挑选相应图标并获取类名,应用于页面
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-daohang"></use>
</svg>