通过icomoon生成并使用字体图标

进入网站 https://icomoon.io/

点击icomoon app

图片.png

选择图标或者导入本地图标

图片.png

在阿里巴巴矢量图库里可以免费下载到SVG格式图标。
链接地址：http://www.iconfont.cn/

导入完图片 生成字体

图片.png

配置字体，下载压缩包

图片.png

解压缩后，将红框里的文件拷贝到项目中

图片.png

修改一下style.css里面的路径

图片.png

可以看到css文件里都是生成的字体图标对应的类名和编码

图片.png

在需要使用字体图标的地方导入style.css文件 为需要添加图标位置的标签添加与该图标对应的类icon-xxxx

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

推荐阅读更多精彩内容

  • iconfont实践小结
    一.iconfont使用场景（优缺点）； 一般我们项目决定要使用一个技术点前，会查相关资料对其有大概的理解。例如，...
    萧强阅读 5,719评论 1赞 6
  • web、文字图标
    首先说明，我是web前端开发的新手，高手忽喷！。最近开发一个微信商城，要用到很多图标，之前我都是用@×2雪碧图。但...
    Cola丶ZYQ阅读 6,630评论 1赞 2
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,901评论 25赞 709
  • 时光隧道
    今天是六一，我能顺着时光隧道找回逝去的童年吗？
    caoxia阅读 3,421评论 2赞 2
  • Unity3dShader边缘发光效果
    shader知识：http://imgtec.eetrend.com/blogs/%E5%A2%A8%E5%8D%...
    好怕怕阅读 12,032评论 0赞 11