前言：unicode 引用和font-class 引用 iconfont字体图标，他们的图标颜色都是黑白色，如果想引入多色图标请使用symbol 引用。font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
注：1和2都是黑白色引入，3彩色引入
1、font-class在线引入
在当前页面或者uniapp项目的app.vue文件中的全局style样式，导入在线地址，然后使用text标签引入，通过设置font-size可以设置显示大小。
首先将字体图标添加至购物车，然后点击购物车，随便选个项目进行添加。
然后点击更新代码将其生成后点击复制，注意选择font class
复制地址为任意vue文件的style标签中，复制的地址没有https标签，注意添加使用https
然后在vue的template模板中，使用text标签引入，开头添加iconfont，然后空格，图标名，选中图标后会出现图标名称，选择复制
粘贴到text标签中，就实现了在线引用字体图标。
2、font-class离线引用方法一，不下载使用
按照上面的操作，将图标添加到购物车标签中，然后在此界面点击生成的css代码
点击后会跳转到在线引用图标库的地址
在地址前方添加https:，转换为在线地址。
讯享网
在App.vue中全局style引入该文件
讯享网
接着在组件中引用，最好设置下font-size控制图标大小，否则在全局icon设置，无法生效。
<text class=“iconfont icon-xiaomaibaifenbing” style=“font-size: 26px;”></text>
2、font-class离线引用方法二，下载后使用
在购物车添加项目中，选择下载下载到本地
将下载文件中的css和其他的文件放入到common文件夹中
更改iconfont.css文件中的路径，使其修改为当前目录路径，否则会出现文件查找失败的错误。
文件查找失败：‘https://huaweicloud.csdn.net/iconfont.ttf?t=05' at App.vue:4
路径前添加common
在App.vue中全局style引入该文件
讯享网
接着在组件中引用就可以了，最好设置下font-size来控制图标大小，否则在全局icon设置，无法生效。
<text class=“iconfont icon-xiaomaibaifenbing” style=“font-size: 26px;”></text>
3、symbol 离线方式引入多色图标
点击购物车后，选择symbol ，在选择下载至本地
将下载的文件进行解压，可以得到以下文件
在该窗口中，按住shift+鼠标右键，选择打开命令窗口
输入以下命令：如果是第一次做iconfont图标，需要npm install -g iconfont-tools 安装工具
然后输入iconfont-tools 进行文件的操作，如果不是第一次，直接在命令窗口输入iconfont-tools然后会出现让设置文件夹名字，class 的perix前缀，可以直接回车，使用默认设置即可
然后将生成的文件夹中的.css文件复制到common文件夹中
在App.vue中全局style引入该文件
接着在组件中引用就可以了，最好设置下height，width，在该图标大小中使用宽度和高度设置大小
<text class=“t-icon t-icon-lipin”></text> 可以使用text标签，也可以使用view标签
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/199114.html