iconfont 阿里巴巴矢量图标库怎么用

1，首先点击右上角头像进行账号登录，一般用Github登录iconfont。

2，登录iconfont后，在界面可以选择右上角的搜索，搜索自己要的图标，比如购物车。

3，选择购物车，并把选好的图标加入到“添加至项目”，进行下一步。

4，添加至项目后，加入项目“APPicon”。

5，加入项目“APPicon”后，点击“下载至本地”保存到电脑中，默认“download.zip”文件，放到系统目录的字体目录中。

6，打开Word，选择 “插入” “符号”“其它符号”，并把选中要使用的图标，复制到Axure中进行粘贴。

7，最后把选中要使用的图标，复制到Axure中进行 “粘贴”图标后，就能正常显示在需要的地方了。

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

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

第二步

解压下载的文件包，如图

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

第三步

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

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

第四步

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

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

第五步

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

修改前

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

修改后

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

第六步

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

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

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

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

具体使用方法如下：

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

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

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

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

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

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

---