1、登录iconfont-阿里巴巴矢量图标库
2、搜索图标
3、选择图标,添加购物车
4、将购物车中的图标加入项目
5、找到我的项目,将图标下载到本地,得到一个压缩包6、 将压缩包解压到项目当中,并在项目中引入icon font.css文件
7、在项目的css文件夹下新建一个iconfont.css,并在项目中引入
在iconfont.css中引入
其中地址要指向fonts文件夹下的文件,例如
@font-face {font-family: 'iconfont';
src: url('../fonts/iconfont.eot');
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype'),
url('../fonts/iconfont.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;}
8、挑选相应图标并获取字体编码,应用于页面
<i class="iconfont">3</i>
<spanclass="iconfont"></span>