字体图标的使用

阿里巴巴矢量图标库官网

1，首先百度iconfont,找到阿里巴巴矢量图标库官网(http://www.iconfont.cn/),
   然后注册登录,或者用github登录也行。
2，查找自己需要的字体图标，加入购物车，下载代码到本地文件夹。
3，把下载的文件添加到项目中 <link rel="stylesheet" href="font_aqil4ao5abgldi/iconfont.css">,
在项目中引用文件中的iconfont.css文件
4,到了最后一步了,如何在项目中使用字体图标呢,其实很简单
<i class='iconfont icon-female'></i>
,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:
5.字体图标可以用设置字体的方式来设置字体图标的大小颜色，注意权重问题
 调节字体图标的大小是通过元素的font-size属性来控制的;

 

在Vue中引入字体图标

先在阿里巴巴字体图标库中找到想到的字体图标加入购物车添加到项目中，font class  生成在线链接，

然后在vue项目中的index.html文件中引入如下图的css。

<link rel="stylesheet" href="http://at.alicdn.com/t/font_683035_jktsm5evjfc.css">