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

news/2024/6/18 22:03:49 标签: uni-app, npm, 前端

npmfontawesome_0">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.niftyadmin.cn/n/5475329.html

相关文章

Android Apk签名算法使用SHA256

Android apk签名算法使用SHA256 本文不介绍复杂的签名过程&#xff0c;说一下Android签名算法使用SHA256。 但是SHA1不是相对安全签名算法&#xff0c;SHA256更加安全一些。 一般大公司才会有这种细致的安全要求。 如何查看apk签名是否是SHA1还是SHA256 1、拿到apk文件&…

java数据结构与算法刷题-----LeetCode367. 有效的完全平方数

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 自实现Math.sqrt()函数&#xff1a;牛顿迭代法 自实现Math.sqrt(…

如何进行软件质量评估?

一、为何评估 软件质量评估的重要性体现在以下几个关键方面&#xff1a; 确保用户需求满足&#xff1a; 软件质量评估首先是为了确保软件产品能够准确、完整地满足用户的需求。通过评估&#xff0c;可以发现软件在功能、性能、安全性等方面的不足之处&#xff0c;及时进行修正…

初识Java中的NIO

1.概述 Java NIO 全称java non-blocking IO &#xff0c;是指 JDK 提供的新 API。从 JDK1.4 开始&#xff0c;Java 提供了一系列改进的输入/输出新特性&#xff0c;被统称为 NIO(即 New IO)&#xff0c;是同步非阻塞的。NIO采用内存映射文件的方式来处理输入输出&#xff0c;NI…

simulink中MATLAB Function笔记

MATLAB Function在simulink里比较万能&#xff0c;可以添加自己想要的功能&#xff0c;另外&#xff0c;它的不仅仅局限于一个输入一个输出&#xff0c;可以有多个输入和多个输出&#xff0c;甚至没有输入或没有输出&#xff0c;如下图 左侧的MATLAB Function模块可以作为信号发…

华为海思2024春招数字芯片岗机试题(共9套)

huawei海思2024春招数字芯片岗机试题(共9套&#xff09;&#xff08;WX:didadidadidida313&#xff0c;加我备注&#xff1a;CSDN huawei数字题目&#xff0c;谢绝白嫖哈&#xff09; 题目包含数字集成电路、System Verilog、Verilog2001、半导体制造技术、高级ASIC芯片综合、…

npm版本切换工具nvm

有了nvm&#xff0c;可以在一台机器上同时安装多个版本的nodejs&#xff0c;然后指定使用某个版本。 前端开发的时候&#xff0c;安装依赖一直是个令我头痛的问题。总是报错&#xff0c;或者不是少了这样就是少了那样&#xff0c;鸡飞狗走。以往&#xff0c;一般要装个enpm&am…

2024年4月8日--4月14日(全面进行)

根据月计划&#xff0c;为了要考虑把产品代码吃透。先对于计算几何&#xff0c;图像处理&#xff0c;测量学基础&#xff0c;slam进行 当然&#xff0c;也要把ue继续进行着。ue的rpg和底层渲染&#xff0c;以及渲染模块的源码抄抄。&#xff08;Lightmass部分还要看看光线追踪…