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.mzph.cn/news/799571.shtml

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

相关文章

读《C Primer Plus》

1、汇编语言是为特殊的中央处理单元设计的一系列内部指令&#xff0c;使用助记符来表示&#xff1b;不同的CPU系列使用不同的汇编语言。 2、C语言充分利用计算机优势&#xff0c;使它具有汇编语言才有的微调控能力&#xff0c;可移植性极好。 3、C语言可以访问硬件、操作内存…

阿里云服务器可以干嘛?阿里云服务器八大用途介绍

阿里云服务器可以干嘛&#xff1f;能干啥你还不知道么&#xff01;简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等&#xff0c;阿里云百科aliyunbaike.com整理阿里云服务器的用途&#xff1a; 阿里云服务器活动 aliyunbaike.com…

SpringBoot表单防止重复提交

哪些因素会引起重复提交&#xff1f; 开发的项目中可能会出现下面这些情况&#xff1a; 前端下单按钮重复点击导致订单创建多次 网速等原因造成页面卡顿&#xff0c;用户重复刷新提交请求 黑客或恶意用户使用postman等http工具重复恶意提交表单 重复提交会带来哪些问题&…

SQL Server语法基础:入门到精通

博客前言 在数据库管理的世界中&#xff0c;SQL Server无疑是一个重要的角色。无论是初学者还是经验丰富的数据库管理员&#xff0c;都需要对SQL Server的查询语法有深入的理解。本文将带领大家深入解析SQL Server的查询语法&#xff0c;并分享一些实用的技巧&#xff0c;帮助…

Kubernetes(K8s)运维实战:案例解析与代码实践

一、引言 随着容器技术的普及&#xff0c;Kubernetes&#xff08;K8s&#xff09;作为容器编排领域的领军者&#xff0c;已成为企业运维不可或缺的工具。K8s以其强大的自动化管理、可扩展性和高可用性等特点&#xff0c;为运维人员提供了便捷、高效的管理手段。本文将结合具体案…

Redis 之集群模式

一 集群原理 集群&#xff0c;即Redis Cluster&#xff0c;是Redis 3.0开始引入的分布式存储方案。 集群由多个节点(Node)组成&#xff0c;Redis的数据分布在这些节点中。 集群中的节点分为主节点和从节点&#xff1a;只有主节点负责读写请求和集群信息的维护&#xff1b;从…

突破编程_前端_SVG(概述)

1 什么是 SVG SVG&#xff0c;全称可缩放矢量图形&#xff08;Scalable Vector Graphics&#xff09;&#xff0c;是一种基于 XML&#xff08;可扩展标记语言&#xff09;的矢量图像格式。这种图像格式的主要特点是它描述的是矢量图形&#xff0c;而不是基于像素的位图图像。因…

基于 Vue3 + Webpack5 + Element Plus Table 二次构建表格组件

基于 Vue3 Webpack5 Element Plus Table 二次构建表格组件 文章目录 基于 Vue3 Webpack5 Element Plus Table 二次构建表格组件一、组件特点二、安装三、快速启动四、单元格渲染配置说明五、源码下载地址 基于 Vue3 Webpack5 Element Plus Table 二次构建表格组件&#x…

力扣 ---组合总和

题目&#xff1a; 给定一个无重复元素的正整数数组 candidates 和一个正整数 target &#xff0c;找出 candidates 中所有可以使数字和为目标数 target 的唯一组合。 candidates 中的数字可以无限制重复被选取。如果至少一个所选数字数量不同&#xff0c;则两种组合是不同的。…

【Java】maven是什么?

先看一下基本概念: ①Maven 翻译为"专家"&#xff0c;"内行"是跨平台的项目管理工具。 主要服务于基于Java平台的项目构建&#xff0c;依赖管理和项目信息管理。 ②项目构建 项目构建过程包括【清理项目】→【编译项目】→【测试项目】→【生成测试报…

Matlab 修改图例顺序

对于使用 .m 文件绘制的图片&#xff0c;可以修改程序中图例的顺序来改变图片的图例。如果图片所对应的 .fig 文件已经存在&#xff0c;而且不便修改源程序&#xff0c;则可以通过如下方式来修改图例&#xff1a; step 1: 打开fig文件&#xff0c;然后点击绘图浏览器 step 2&…

PHP超级外链分发源码

源码简介 超级外链工具&#xff0c;是一款在线全自动化发外链的推广工具。使用本工具可免费为网站在线批量增加外链&#xff0c;大大提高外链发布工作效率&#xff0c;是广大草根站长们必备的站长工具。 搭建环境 PHP 5.6 安装教程 上传源码压缩包到网站目录并解压即可 首…

kali 渗透工具 - mestaploit

永恒之蓝漏洞的小知识&#xff1a; 黑客通过改造 永恒之蓝 制作 wannacry 制作病毒入侵高校内网。 mestaploit 攻击永恒之蓝流程&#xff1a; 使用模块 msfconsole配置required 模块参数运行&#xff0c;开始监听主机 msfconsole 主要模块 - 选择使用模块 search ms17_01…

大语言模型RAG vs. 长文本

在学习完大语言模型中最热门的两个概念大语言模型落地的关键技术&#xff1a;RAG和大语言模型上下文窗口初探后&#xff0c;关于RAG和长文本&#xff08;long-context&#xff09;的优劣比较引起了广泛的讨论&#xff0c;本文整理了大语言模型RAG vs. 长文本争论的5种类观点。 …

百度富文本编辑器配置(vue3)

今天分享一下我做的项目里面的一个百度富文本的配置问题&#xff0c;安装配置流程以及如何解决的 1.首先是安装组件 # vue-ueditor-wrap v3 仅支持 Vue 3 npm i vue-ueditor-wrap3.x -S # or yarn add vue-ueditor-wrap3.x 2. 下载 UEditor UEditor 并不支持通过 npm 的方式…

爬虫入狱笔记——xx政府网站公开政策数据

最近在学习爬虫&#xff0c;做个笔记吧 今天爬xx政府网站-政策法规栏目的数据 咱们首先需要找到数据从哪里来&#xff0c;鼠标右键->检查&#xff08;或者快捷键一般为F12&#xff09;检查元素&#xff0c;搜索关键词 eg.【违法案例】 回车&#xff0c; 如果没有的话&am…

模数转换器 SIG5533A 国产平替 CS5533AS,替代 CS5533AS

信格勒微电子的芯片产品已通过行业头部大厂导入验证&#xff0c;深受百万终端客户好评。 而且因为 fully compatible. 板子拿来&#xff0c;换个芯片&#xff0c; 性能更好 。MCU 不用改 c code。 SIG5531A/SIG5532A/SIG5533A/SIG5534A 1.6SPS to 3840SPS 16-bit/24-bit AD…

Java8关于Function接口

Java学习-Function接口 1 函数式接口简介和学习地址2 两种常见的函数式接口2.1 Runnable&#xff1a;执行接口&#xff0c;不接收参数&#xff0c;也无返回结果。2.2 Consumer&#xff1a;作为消费接口&#xff0c;接收一个参数&#xff0c;无返回结果。 3 初识3.1 定义Functio…

数据结构初阶:栈和队列

栈 栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。 进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。 栈中的数据元素遵守后进先出 LIFO &#xff08; Last In First Out &#xff09;的原则。…

报错:Directory“c:/Gowin/20240325 USB_3/impl/pnr”has null character.

问题说明 将工程从一个电脑拷贝到另外一个电脑&#xff0c;然后工程综合没有问题&#xff0c;布局布线时没有ERROR报出&#xff0c;但是就是不能进行布局布线&#xff0c;如下图&#xff1a; 解决方法&#xff1a; 将拷贝工程文件夹名字中的空格删除&#xff0c;然后重新布局…