iconFont使用教程

在线引用图标

  1. 进入网站:Iconfont网址:http://www.iconfont.cn
  2. 点击网站上方的“官方图标库”,选择自己喜欢的图标。在这里我选择天猫的图标库。
  3. 选择好自己喜欢的图标,你可以有两个选择,下载代码 和 添加至项目。
  4. 我们这两选择添加至项目,然后新建项目,并输入名称。
  5. 项目添加好后,会自动给我们转入到我们项目库中。点击查看在线链接。
  6. 生产css引入的代码,生成后就可以在项目首页index.html引入了。
 <link rel="stylesheet" href="http://at.alicdn.com/t/font_wyhhdpv5lhvbzkt9.css">

图标的使用: 图标顺利引入到项目中,已经可以使用它们了,在“我的项目中”你会看到图标的font class值。可以直接复制代码粘贴,也可以自己写代码。

<i class="icon iconfont icon-hanbao"></i>
这样在页面中就可以看到图标了。

添加更多图标:

如果在项目中觉的图标不够用了,需要添加更多图标。可以利用下面四步进行添加。

去Iconfont网站继续挑选,把相中的图标加入购物车中。
把购物车中的图标加入到项目中。
重新生成在线链接。(这部很重要)
在项目主页中(index.html),更换css引入链接。

线下使用图标

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,401评论 1 45
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,731评论 4 61
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • Iconfont 是阿里妈妈MUX倾力打造的矢量图标管理、交流平台, 设计师可以将图标上传到Iconfont平台,...
    望星star阅读 10,250评论 0 0
  • 天秋叶渐黄,风扫惹离伤。 身落凡尘里,何须说凤凰。
    真老实人_425a阅读 3,157评论 2 15

友情链接更多精彩内容