uniapp使用npm命令引入font-awesome图标库最新版本并解决APP和小程序不显示图标的问题

uniapp使用npm命令引入font-awesome图标库最新版本

图标库网址:https://fontawesome.com/search?q=tools&o=r
命令行:

引入
npm i @fortawesome/fontawesome-free
查看版本
npm list @fortawesome

在这里插入图片描述
在这里插入图片描述
在main.js文件中:

import '@fortawesome/fontawesome-free/css/all.min.css'

页面使用:
效果:
在这里插入图片描述

1,固定图标

<i class="v5-icon fa fa-user"></i>

2,根据接口返回数据展示对应图标和颜色

<view :class="'fa-solid fa-'+ item.ICONFONT_NAME":style="{color:'#'+item.ICONFONT_COLOR,fontSize:item.ICONFONT_SIZE+'px'}"></view>

这个方法在web端可以正常显示,但是在微信小程序和APP中不显示,解决完后会更新

解决在小程序上只显示方框的问题
报错:[渲染层网络层错误] Failed to load local font resource /assets/fa-brands-400.b7dee83c.ttf
原因:小程序解析不了ttf文件,需要将ttf文件转为base64文件
转换工具:https://transfonter.org/
转换后打开stylesheet.css文件,复制这部分的代码粘贴到main.wxss对应tff文件名称的url()中;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就可以在小程序上正常显示了
在这里插入图片描述
使用上面的方法,在main.js中引入,但是在app中调试会报错:
App平台 v3 模式暂不支持在 js 文件中引用“@fortawesome/fontawesome-free/css/all.min.css“ 请改在 style 内引用​
所以改在App.vue中引入
但是在style里面引用会报错
所以单独写了一个style,使用src引入

<style src="./node_modules/@fortawesome/fontawesome-free/css/all.min.css"></style>

实现小程序,APP,WEB端都能正常显示。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/301425.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式Linux系统调用执行基本流程

内核态与用户态 什么是系统调用 系统调用是怎么实现的 库函数write 库函数扩展汇编宏 int 0x80中断 调用对应的中断处理函数 检索系统调用函数表 最终执行sys_write 内核态与用户态数据交互 内核态与用户态 早期工程师们在操作系统上编写程序的时候,自己写个程序可以访问别人…

3.5、文本显示(Text/Span)

创建文本 Text 可通过以下两种方式来创建: string 字符串 效果图 Text(我是一段文本)引用 Resource 资源 资源引用类型可以通过 $r 创建 Resource 类型对象,文件位置为 /resources/base/element/string.json。 引用的资源位于:src/main/resources/base/element/string…

红酒:按年份分类,探究不同类型红酒的品质

在红酒的世界里&#xff0c;年份是一个至关重要的因素&#xff0c;它对红酒的品质和价值有着深远的影响。云仓酒庄雷盛红酒深知这一点&#xff0c;从酿造的首年起&#xff0c;就严格把控每一个环节&#xff0c;力求为消费者提供品质的红酒。 首先&#xff0c;让我们了解一下什么…

飞企互联-FE企业运营管理平台 druid路径 弱口令漏洞复现

0x01 产品简介 飞企互联-FE企业运营管理平台是一个基于云计算、智能化、大数据、物联网、移动互联网等技术支撑的云工作台。这个平台可以连接人、链接端、联通内外,支持企业B2B、C2B与O2O等核心需求,为不同行业客户的互联网+转型提供支持。 0x02 漏洞概述 飞企互联-FE企业…

ctf刷题记录2(更新中)

因为csdn上内容过多编辑的时候会很卡&#xff0c;因此重开一篇&#xff0c;继续刷题之旅。 NewStarCTF 2023 WEEK3 Include &#x1f350; <?phperror_reporting(0);if(isset($_GET[file])) {$file $_GET[file];if(preg_match(/flag|log|session|filter|input|data/i, $…

QT----opencv4.8.0编译cuda版本,QTcreater使用

目录 1 编译opencv4.8.02 验证能否加载GPU cuda12.1 opencv4.8.0 vs2019 cmake3.29 1 编译opencv4.8.0 打开cmake&#xff0c;选择opencv480路径&#xff0c;build路径随意 点击configure后&#xff0c;选择这些选项&#xff0c;opencv_word&#xff0c;cuda全选&#xff0c;…

Java环境变量配置说明

1、右键点击“此电脑”&#xff0c;选择“属性”项。 2、点击“高级系统设置”&#xff0c;在弹出的系统属性框中&#xff0c;选择“高级”选项卡&#xff08;默认即显示该选项卡&#xff09;&#xff0c;点击“环境变量”。 3、在弹出的“环境变量”框&#xff0c;中选择下方…

酷开科技不断深耕智能电视领域,用酷开系统带给消费者更多可能性

在这个网络快速发展的时代&#xff0c;电视行业也发生了巨大变革。与以往单纯的“看”电视不同&#xff0c;人们不再满足于现有的状态&#xff0c;消费者对电视娱乐的追求更加丰富&#xff0c;这也就带给智能电视产业无限的发展可能。酷开科技瞄准这一产业趋势&#xff0c;不断…

K8S - Service简介和 1个简单NodePort例子

大纲图 流量方向 如上图&#xff0c; 当用户or 别的service 从k8s 集群外部访问 集群内的services 流量方向有两种 一种是垂直方向&#xff0c; 通过域名 -> Load Balancer -> gateway -> services , 在k8s 一般是通过ingress 来实现&#xff0c; 而ingress 不是本文…

面试经典150题——删除链表的倒数第 N 个结点

1. 题目描述 2. 题目分析与解析 这个题目整体来讲还是比较简单的&#xff0c;因此直接给出解题思路&#xff1a; 遍历链表计数 计算要删除的节点的位置 创建虚拟头节点 创建指针指向虚拟头节点 移动指针到要删除的节点的前一个节点 删除节点 返回头节点 3. 代码实现 …

IDEA new ui 找不到evaluate

问题 idea升级新版本之后&#xff0c;发现熟悉的evaluate不见了&#xff0c;只能通过快捷键启动&#xff0c;未免太麻烦了&#xff0c;如何像旧版一样添加图标直接点呢&#xff1f; 解决方案 打开debug窗口&#xff0c;在这个地方右键&#xff0c;然后选择add actions 搜索…

LLM端侧部署系列 | 如何将阿里千问大模型Qwen部署到手机上?实战演示(下篇)

引言 简介 编译Android可用的模型 转换权重 生成配置文件 模型编译 编译apk 修改配置文件 绑定android library 配置gradle 编译apk 手机上运行 安装 APK 植入模型 效果实测 0. 引言 清明时节雨纷纷&#xff0c;路上行人欲断魂。 小伙伴们好&#xff0c;我是《小…

VAR模型(二)结婚率的影响因素分析

本文研究分析了普通本专科毕业人数、城乡居民人民币储蓄存款年底余额对结婚率的影响。以计量经济学中VAR模型为主要分析模型,建立了结婚率的多元回归模型。分析了普通本专科毕业人数、城乡居民人民币储蓄存款年底余额和结婚率现状。并且对未来结婚率进行了预测。 1.理论模型和…

C语言面试题之化栈为队

化栈为队 实例要求 C语言实现实现一个MyQueue类&#xff0c;该类用两个栈来实现一个队列&#xff1b;示例&#xff1a; MyQueue queue new MyQueue();queue.push(1); queue.push(2); queue.peek(); // 返回 1 queue.pop(); // 返回 1 queue.empty(); // 返回 false说明&…

NCI SEER breast cancer美国国立癌症研究所数据库乳腺癌生存分析和乳腺癌预测模型(2024年新项目)

​作者Toby&#xff0c;来源公众号&#xff1a;python生物信息学,美国国立癌症研究所数据库乳腺癌生存分析和乳腺癌预测模型 NCI美国国立癌症研究所(NationalCancerInstitute,NCI) 美国国立癌症研究所&#xff08;NCI&#xff09;是美国国家卫生研究院&#xff08;NIH&#xf…

USACO 2024 Open Bronze铜组题解

迟到了一个月的题解...... Logical Moos: 啊这题放在铜组T1雀食有点BT...... 首先&#xff0c;我们关注l前第一和r最后那两组。如果这俩有一个是true&#xff0c;那答案肯定也是true。 否则&#xff0c;在l和r外边的都是false。那我们就只用仔细看l和r中间的玩意儿。对于l和…

如何挂载img镜像以及lvm分区

上一章节&#xff0c;我在win10下利用qemu安装了一个aarch64的 kylin-server-v10的ISO系统镜像包。安装时将系统安装到了虚拟硬盘kylin-server-v10.img 里&#xff0c;现在有个需求&#xff0c;要读出kylin-server-v10.img中文件系统的内容。 通过fdisk命令可以看到 kylin-ser…

利用AI结合无极低码(免费版)快速实现接口开发教程,会sql即可,不需要编写编译代码

无极低码无代码写服务+AI实践 本次演示最简单的单表无代码增删改查发布服务功能,更复杂的多表操作,安全验证,多接口调用,自自动生成接口服务,生成二开代码,生成调用接口测试,一键生成管理界面多条件检索、修改、删除、查看、通用公共接口调用、通用无限级字典调用等后续…

web前端框架设计第四课-条件判断与列表渲染

web前端框架设计第四课-条件判断与列表渲染 一.预习笔记 1.条件判断 1-1&#xff1a;v-if指令&#xff1a;根据表达式的值来判断是否输出DOM元素 1-2&#xff1a;template中使用v-if 1-3&#xff1a;v-else 1-4&#xff1a;v-else-if 1-5&#xff1a;v-show&#xff08;不支…

生成式AI的情感实验——AI能否产生思想和情感?

机器人能感受到爱吗&#xff1f;这是一个很好的问题&#xff0c;也是困扰了科学家们很多年的科学未解之谜。虽然我们尚未准备好向智能机器赋予情感&#xff0c;但智能机器却已经可以借助生成式人工智能&#xff08;AI&#xff09;来帮助我们表达自己的情感。 自然情感表达 AI正…