admin 管理员组

文章数量: 1184232

1、到阿里字体库网站中，登录账号。

我的账号是我的126邮箱。

2、在图标库中查找自己需要的图标，并加入购物车，添加至项目中。最后下载到本地。

3、如何将想用的图标应用在html网页中？

下图为下载的阿里图标。

首先将iconfont.css文件引入到html中（注意路径）： 

    <link rel="stylesheet" rev="stylesheet" href="css/iconfont.css" type="text/css" media="all" />

再将需要的图标代码引入html对应位置： 

<span class="iconfont">&#xe626;</span>

注意：使用过程中需要的图标尽量一次性下载完，然后使用。这样图标的 iconfont.css 文件是同一个文件。

虽然小图标的代码一样，但是每次下载 iconfont.css文件。它里面的样式是有针对性的。不是所有图标的样式。所以当分批次下载图标时候，iconfont.css文件内容不一样。应该是可以汇总在一起的。但是毕竟麻烦。我也尝试汇总一起，也不行，应该是还有东西需要修改。

完成！

本文标签： 提升你的 图标 掌握

版权声明：本文标题：掌握iconfont，提升你的前端代码美学与效率 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1770956628a3539484.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。