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

news2025/1/22 21:56:06

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.coloradmin.cn/o/1576322.html

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

相关文章

AI智能涂抹修补解决方案助力企业高效创作

传统的手动涂抹修补方式不仅效率低下&#xff0c;而且往往难以达到理想的视觉效果。美摄科技凭借深厚的AI技术研发实力&#xff0c;推出了面向企业的AI智能涂抹修补解决方案&#xff0c;为企业带来前所未有的创作体验。 美摄科技的AI智能涂抹修补解决方案&#xff0c;具备强大…

绝地求生:在小小的花园里面挖呀挖呀挖~ 29.1版本将支持可破坏地形功能

嗨&#xff0c;我是闲游盒~ 想必大家也都知道了新版本即将上线的可破坏地形功能即将在29.1版本上线&#xff0c;而具体的玩法暂时没有公布~ ◆ 随着离4月10日越来越近&#xff0c;官方发布了一条关于新版本可破坏地形的玩法预告 注意看&#xff0c;这个男人叫小帅&#xff0c;正…

基于小程序+ssm实现的悬赏信息发布系统

作者主页&#xff1a;Java码库 主营内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app等设计与开发。 收藏点赞不迷路 关注作者有好处 文末获取源码 技术选型 【后端】&#xff1a;Java 【框架】&#xff1a;ssm 【…

Django项目定时任务django-crontab

首先定义一个定时任务函数tasks.py&#xff08;见文章末尾示例&#xff09;&#xff0c;编写函数&#xff0c;然后在setting.py中配置定时任务 1、首先安装django-crontab pip install django-crontab 2、在setting.py中添加应用 (在所有自定义注册app之上) INSTALLED_APPS …

C++ //练习 11.28 对一个string到int的vector的map,定义并初始化一个变量来保存在其上调用find所返回的结果。

C Primer&#xff08;第5版&#xff09; 练习 11.28 练习 11.28 对一个string到int的vector的map&#xff0c;定义并初始化一个变量来保存在其上调用find所返回的结果。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代码块 /******…

书生·浦语训练营二期第三次笔记-茴香豆:搭建你的 RAG 智能助理

RAG学习文档1&#xff1a; https://paragshah.medium.com/unlock-the-power-of-your-knowledge-base-with-openai-gpt-apis-db9a1138cac4 RAG学习文档2: https://blog.demir.io/hands-on-with-rag-step-by-step-guide-to-integrating-retrieval-augmented-generation-in-llms-a…

Adobe InDesign 2024 v19.3 (macOS, Windows) - 版面设计和桌面出版软件

Adobe InDesign 2024 v19.3 (macOS, Windows) - 版面设计和桌面出版软件 Acrobat、After Effects、Animate、Audition、Bridge、Character Animator、Dimension、Dreamweaver、Illustrator、InCopy、InDesign、Lightroom Classic、Media Encoder、Photoshop、Premiere Pro、Ad…

Spring 如何优雅的灵活的Http重试

1、背景说明 在互联网时代&#xff0c; 不同系统之间大多数是通过http调用&#xff0c;调用过程中会超时、异常等过种问题。为了保证业务稳定&#xff0c;http 重试是常用方案。下面列举几种方案。 2、Http重试方案介绍 2.1 传统方案 1、使用传统的递归调用&#xff0c;实现方…

42.基于SpringBoot + Vue实现的前后端分离-服装销售平台管理系统(项目 + 论文)

项目介绍 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的交换和信息流通显得特别重要。因此&#xff0c;开发合适的服装销售平台成为企业必然要走的一步棋。开发合适的服…

让H5页面轻松打开第三方App,Xinstall助力实现无缝跳转

在移动互联网时代&#xff0c;H5页面因其跨平台、易传播的特性而被广泛应用&#xff0c;然而H5页面在打开第三方App时往往存在诸多不便。用户需要通过复杂的操作步骤才能实现跳转&#xff0c;这无疑降低了用户体验。为了解决这一难题&#xff0c;Xinstall应运而生&#xff0c;为…

达梦备份与恢复

达梦备份与恢复 基础环境 操作系统&#xff1a;Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本&#xff1a;DM Database Server 64 V8 架构&#xff1a;单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…

【面试题】RocketMQ的工作流程?

RocketMQ是一种开源的分布式消息队列系统&#xff0c;它具有高吞吐量、低延迟和高可靠性的特点。下面是RocketMQ的简要工作流程&#xff1a; Producer&#xff08;生产者&#xff09;发送消息&#xff1a;消息的生产者将消息发送到RocketMQ。生产者将消息封装为一个消息对象&am…

DIY自己的AI

一、开源AI大语言模型 目前开源的AI大语言模型(LLM)已经非常的多了&#xff0c;以下是收集的一些LLM&#xff1a; LLaMA LLaMA&#xff08;Large Language Model Meta AI&#xff09;&#xff1a;LLaMA是由MetaAI的Facebook人工智能实验室&#xff08;FAIR&#xff09;发布的…

html5分步问卷调查表模板源码

文章目录 1.设计来源1.1 问卷调查11.2 问卷调查21.3 问卷调查31.4 问卷调查41.5 问卷调查51.6 问卷调查6 2.效果和源码2.1 完整效果2.2 源代码 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/article/details/137454703 html5分…

2024/4/1—力扣—连续数列

代码实现&#xff1a; 思路&#xff1a;最大子数组和 解法一&#xff1a;动态规划 #define max(a, b) ((a) > (b) ? (a) : (b))int maxSubArray(int* nums, int numsSize) {if (numsSize 0) { // 特殊情况return 0;}int dp[numsSize];dp[0] nums[0];int result dp[0];fo…

【动态规划-状态压缩dp】【蓝桥杯备考训练】:毕业旅行问题、蒙德里安的梦想、最短Hamilton路径、国际象棋、小国王【已更新完成】

目录 1、毕业旅行问题&#xff08;今日头条2019笔试题&#xff09; 2、蒙德里安的梦想&#xff08;算法竞赛进阶指南&#xff09; 3、最短Hamilton路径&#xff08;《算法竞赛进阶指南》&模板&#xff09; 4、国际象棋&#xff08;第十二届蓝桥杯省赛第二场C A组/B组&#…

MySQL的基本查询

&#x1f4df;作者主页&#xff1a;慢热的陕西人 &#x1f334;专栏链接&#xff1a;MySQL &#x1f4e3;欢迎各位大佬&#x1f44d;点赞&#x1f525;关注&#x1f693;收藏&#xff0c;&#x1f349;留言 本博客主要内容介绍了mysql的基本查询部分的知识&#xff0c;包括Crea…

日期时间相关的类

分界线jdk8 jdk8之前和之后分别提供了一些日期和时间的类&#xff0c;推荐使用jdk8之后的日期和时间类 Date类型 这是一个jdk8之前的类型&#xff0c;其中有很多方法已经过时了&#xff0c;选取了一些没有过时的API //jdk1.8之前的日期 Date Date date new Date(); // 从1970年…

多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络多输入多输出预测

多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络多输入多输出预测预测效果基本介绍程序设计往期精彩参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现OOA-BP鱼鹰算法优化BP神经网络…

白色磨砂质感html5页源码

白色磨砂质感html5页源码&#xff0c;简约的基础上加上了团队成员&#xff0c;自动打字特效音乐播放器存活时间 源码下载 https://www.qqmu.com/2980.html