字体图标库（字体图标库引入）



前言：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标签

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/30177.html