iconfont使用说明

iconfont 字体图标使用

  1. 到iconfont.cn查找需要的图标(先登录)

  2. 每个都点击“添加入库”

  3. 点击顶部的购物车图标

  4. “添加到项目”，新建一个项目，确定后

  5. 点击下载到本地，解压，我们选择fontClass方式加载字体图标

  6. 需要的文件：

    1. iconfont.css
    2. iconfont.eot；iconfont.svg；iconfont.ttf；iconfont.woff（字体文件，四种格式分别兼容ie,chrome，Android，ios，详见iconfont.css内注释）

  7. 字体文件上传到服务器，载入iconfont.css，确保路径正确

  8. html结构：

    <i class="iconfont icon-home"></i>

  9. 完毕

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • iconfont 使用说明
    什么是iconfont? 以前在做项目的时候经常使用到图片资源，哪怕是一个勾或者叉都要加载图片，最早是一张一张加载...
    zcynine阅读 1,407评论 0赞 0
  • iconfont实践小结
    一.iconfont使用场景（优缺点）； 一般我们项目决定要使用一个技术点前，会查相关资料对其有大概的理解。例如，...
    萧强阅读 1,640评论 1赞 6
  • 手摸手，带你优雅的使用 icon
    前言 本篇文章其实陆陆续续写了快半年，主体部分写好了很久了，但由于种种原因一直没有发布。首先来说说写这篇文章的主要...
    7cd975786ccd阅读 4,496评论 0赞 11
  • App中使用Iconfont的整套方案
    什么是Iconfont 我们通常看到的图标都是以图片形式集成到项目中使用，而 Iconfont 是一套字体图标，和...
    十秒_阅读 3,370评论 1赞 14
  • 使用HTML5开发App（四）
    本人ios初学者，为自己学习方便，复制各位大神的学习性文章放在自己简书里，仅作为自己学习方便使用，如果作者疑此行为...
    bu再等阅读 2,126评论 1赞 3