怎么在已有字体图标的文件夹中添加新的图标

在iconfont网站找到你需要的字体图标，将其添加到购物车中。然后，打开你的购物车，选择下载代码

如何不通过iconfont项目向已有字体图标中添加新的字体图标

第二步

解压下载的文件包，如图

如何不通过iconfont项目向已有字体图标中添加新的字体图标

第三步

将其中以eot/svg/ttf/woff/woff2结尾的文件进行更名，如图

如何不通过iconfont项目向已有字体图标中添加新的字体图标

第四步

将改名字的文件移入前端项目中，如图

如何不通过iconfont项目向已有字体图标中添加新的字体图标

第五步

打开刚才下载的iconfont.css文件，将引用的文件名同步修改

修改前

如何不通过iconfont项目向已有字体图标中添加新的字体图标

修改后

如何不通过iconfont项目向已有字体图标中添加新的字体图标

第六步

打开前端项目中的iconfont.css，将刚修改的css代码复制进来

如何不通过iconfont项目向已有字体图标中添加新的字体图标

这样就大功告成了，一个新的字体图标就加入进来了。

使用iconfont来生成图标相对于基于缉弧光旧叱搅癸些含氓图片的图标来说，有如下的好处：

1.自由的变化大小

2.自由的修改颜色

3.添加阴影效果

4.IE6也可以支持

5.支持图片图标的其它属性，例如，透明度和旋转等等

对于正确使用阿里巴巴iconfont想必大家都有一定的了解，但是详细的使用方式我想大家都是大同小异的吧，那么我就把它告诉大家，以便大家方便使用。

具体使用方法如下：

1.首先在I阿里巴巴iconfont矢量图标库这个页面上把你需要的相应图标随后就会点击购物车按钮加入暂存架；

2.其次就是选择完你所需要所有要用的图标后，这时你就需要给它命名。然后你还要在图标管理所对应的图标应用项目中，最后找到这个项目，获取在线链接，把里面的代码复制到CSS中；

3.完成以上步骤后在HTML中需要使用到图标时，使用iconfont类名。

4.最后就是你可以通过控制iconfont类的属性改变图标的样式。

这样你就完成了你所需的相关需求，通过以上 *** 作，你可以轻松完成。那为什么我们要使用阿里巴巴iconfont，其实也不难发现，顾名思义iconfont也就是把图标用字体的方式呈现,其优点在于以下几个方面:首先可以通过css的样式改变其颜色，其实不是专业人士是很难搞定的，其次就是相对于图片来说,具有更高的分辨率，最后就是它拥有更小的存储，对于我们来说非常方便，所以这就是它的优点所在。任何东西的使用都有它的两面性，它的缺点就是浏览器兼容性不够普及,所幸目前大部分主流浏览器都支持。

但是只要你学会了使用的方法就会很快上手，所以说现在的科技也是有它的好处，使用它的方法其实就是你根据方法进行 *** 作，那么你就会很快，学习这些并不是一成不变的，所以祝你早日学会。

---