字体图标使用教程

699 阅读1分钟

使用字体图标的优点: 1.开发者不需要引入大量的图片,也不需要在js中根据不同场景切换不同图片,仅class名就可搞定,修改灵活; 2.字体图标缩放不失真,不会变模糊; 3.减少网络请求的次数,还可以配合HTML5离线存储做性能优化; 4.兼容性好,几乎支持市面上所有的浏览器;

第一步:搜索字体图标库网址

常用字体图标网址: 1.阿里巴巴矢量图标库(推荐使用):www.iconfont.cn 2.字节跳动图标库:iconpark.oceanengine.com/official

第二步:使用图标

  1. 通过搜索选择项目所需图标 Snipaste_2022-04-03_20-11-26.png 选择图标添加至库
  2. image.png 3.创建项目加入图标 image.png 4.下载项目至本地

Snipaste_2022-04-03_20-18-18.png 5.解压文件添加至项目中,并打开说明书

Snipaste_2022-04-03_20-22-48.png 6.查看说明文档 image.png 8.html页面引入 Snipaste_2022-04-03_20-34-58.png