一、在线引入方式
1.iconfont中选择需要的图标，加入购物车
2.点击图1所示的购物车，弹出如图2所示的弹框。
依次点击 添加至项目—》选择需要添加的项目—》再点击确定,跳转到如图3所示的页面
3.点击图3中 “unicode” “font class” “symbol”可以选择iconfont的引入方式。
注：有些字体图标不能用symbol方式使用。
点击图3所示的,”点击复制代码”,ctrl+v，在浏览器中打开.js文件，即可查看，如果要使用的图标有对应的id，则可以用symbol方式使用，否则不可以用symbol方式。
4.如图3所示，选择iconfont的引入方式后，点击”点此复制代码“，再ctrl+v粘贴到项目的全局样式文件中。
其中 font class方式是.css文件—-可以直接在浏览器中打开
symbol方式是.js文件——可以直接在浏览器中打开
5.全局引入iconfont.css样式文件
如：vue项目一般在 main.js文件中引入
import "./assets/css/iconcss/iconfont.css";6.使用iconfont：注使用方式和引入iconfont的方式要一致。
1）unicode方式
unicode使用图标,如：
2）font class方式
通过class使用图标,如：icon-24px；
字符串模板 动态引入字体图标
3）symbol方式
通过symbol和use标签使用,如：
二、本地引入方式
1. 步骤1-2和在线引入方式一致
2.直接点击如图3所示的 ”下载至本地“ 按钮，下载文件。解压下载好的文件，存放在本地文件夹中。
下载的字体图标文件一般包括以下几个文件，直接复制到项目下即可
3.使用方式和在线引入方式的步骤5、6一致。
4.本地引入，每次添加新图标时，都需要 重复步骤2，下载新的字体图标文件替换旧的字体图标文件（全部替换）
/*
希望对你有帮助！
如有错误，欢迎指正，谢谢！
*/
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/206080.html原文链接：https://javaforall.net
