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,一经查实,立即删除!

相关文章

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

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

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

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

【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…

百度富文本编辑器配置(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…

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;然后重新布局…

昇腾Ascend之npu-smi工具的简单使用

一、参考资料 npu-smi工具 二、npu-smi工具的常用操作 信息查询(info) npu-smi info -t <type> -i <npu_id>查询所有芯片的AI CPU、control CPU和data CPU数量 参数描述-ttype: board, flash, memory, usages, sensors, temp, power, volt, common, health, p…

4/7 QT_day1

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {//窗口设置this->setWindowTitle("小黑子(little black son)");this->setWindowIcon(QIcon("D:\\qq文件\\Pitrue\\pictrue\\black.jpg"));this-&g…

HiSilicon352 android9.0 系统显示方向旋转与截屏问题分析

一&#xff0c;系统显示方向 1. 概述 Android的旋转显示&#xff0c;主要运用于广告机。Android的旋转&#xff0c;包括图形UI的旋转、鼠标和遥控器的旋转及媒体旋转。 下图为竖屏UI的绘制坐标系和显示坐标系。 2. 功能说明 方案依据Android原生的旋转原理设计&#xff0c…

使用tomcat里的API - servlet

一、创建一个新的Maven空项目 首次创建maven项目的时候&#xff0c;会自动从maven网站上下载一些依赖组件&#xff08;这个过程需要保证网络稳定&#xff0c;否则后续打包一些操作会出现一些问题&#xff09; ps:校园网可能会屏蔽一些网站&#xff0c;可能会导致maven的依赖…

Chat2DB

序言 日常开发中&#xff0c;我们可能会用到MyBatis Generator自动生成Entity实体类、DAO接口以及对应的Mapper文件可以减少一部分的冗余代码开发量&#xff0c;随着AI的发展&#xff0c;可以将自然语言转换为SQL语句&#xff0c;例如ChatSQL、阿里的Chat2DB等。 Chat2DB简介…

git Failed to connect to 你的网址 port 8282: Timed out

git Failed to connect to 你的网址 port 8282: Timed out 出现这个问题的原因是&#xff1a;原来的仓库换了网址&#xff0c;原版网址不可用了。 解决方法如下&#xff1a; 方法一&#xff1a;查看git用户配置是否有如下配置 http.proxyhttp://xxx https.proxyhttp://xxx如果…