如何下载及使用网页制作中的 iconfont 矢量字体图标？

谈到iconfont

直译是字体图标，没错它就是。只要做过网页的筒靴们肯定知道它是什么，上图说：

文字前面有颜色的小图标就是iconfont,那肯定有人好奇那，它为什么这样称呼，和一般图标又有什么区别？它该怎么下载和使用呢？

别急别急，一步一步解答：

1.关于定义由来

之所以叫字体图标，就因为我们可以把这样的图标当做字体一样设置样式。

2. 关于下载和使用

今天来讲其中一种途径：

（1）如何搜索及下载

• 在任一浏览器搜索框输入以下检索内容:
  
• 点击进入：
  
• 主页面是这样的，大家可以去发现它的多功能，新用户需要注册的呦~ 当想下载你需要的图标时，在搜索框中输入即可：
  
• 选择你想要的图标，当你hover的时候，选择第一个加入购物车：
  
• 于是，右上角的购物车：
  
• 点击购物车图标，选择添加至项目：
  

类似的，你可以添加你想要的图标。

• 这时就进入了下图页面，你可以做相关编辑，比如说修改项目名称等等：
  
• 接着就可以导出，点击下载至本地即可：
  
• 下载之后，打开压缩包，点击文件：
  
• 选择子目录下的iconfont.css文件粘贴到你正在写的项目css文件中即可：
  

（2）如何使用？

在编程软件中打开之后我们要使用它。很简单, 定义一个标签的类为：

 <span class="iconfont icon-gouwuche"></span>

这时候刷新你的网页，它就出现了

• 类的命名：css类 字体图标名称（导出之前自己可以编辑名称）

关于它的样式可以在css中进行设置：

span{
    color:#9f9f9f;
    position: absolute;
    top:6px;
    right: 80px;
    font-size:18px;
}

谢谢大家！