基础流程就不多赘述,直接到http://www.iconfont.cn/官网看,下面主要介绍在线链接使用:
1生成项目,选中右边的Font Class,
2.复制链接; //at.alicdn.com/t/font_1462780150_442243.css (类似如此)
3.导入到代码中 <link rel="stylesheet" href="http://at.alicdn.com/t/font_1462780150_442243.css">
4.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>IconFont</title>
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1462780150_442243.css">
//补充(需加入这段css才能让图标显示)
<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>
<div class="main">
<h1>IconFont 图标</h1>
<ul class="icon_lists clear">
<li>
<i class="icon iconfont faxian" style="color:red;"></i>
<div class="name">发现</div>
<div class="code"></div>
<div class="fontclass">.faxian</div>
</li>
</ul>
</div>
</body>
</html>
5.最后效果
<i class="icon iconfont faxian"></i>