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

news2024/11/15 20:26:48

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()中;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
就可以在小程序上正常显示了
在这里插入图片描述

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

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

相关文章

想在小红书写出数据分析类的爆文?带你分析爆文的写作思路

一、小红书运营分析背景介绍 在如今社交媒体的浪潮中&#xff0c;小红书、抖音、知乎等平台的流量如同滚滚长江&#xff0c;吸引了无数公司和品牌前来淘金。对于想要推广公司的产品和主营业务而言&#xff0c;如何在这些平台上脱颖而出&#xff0c;成为了一大难题。 数据分析&a…

Java文件流操作

一、文件创建和删除 public static void main(String[] args) throws IOException {File file new File("..\\hello-world.txt");//..表示在上机目录下创建hello-world.txtSystem.out.println(file.getPath());//返回当前相对路径System.out.println(file.getCanoni…

小型案例(acl,nat,dns,dhcp,静态路由)

实验目录&#xff1a;内网互通&#xff0c;pc不可以访问外网&#xff0c;server2可以通过外网访问&#xff08;nat技术&#xff09;&#xff0c;pc2&#xff0c;和pc3可以访问外网 拓扑图如下 配置信息如图&#xff0c;pc1~3 和server2 对应vlan分别是10&#xff0c;20&#…

Matlab 修改图例顺序

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

Qt实现无边框圆角窗口

我们在使用QDialog的时候许多场景下都不需要默认的标题栏&#xff0c;这时候我们需要设置他的标志位。 this->setWindowFlags(Qt::FramelessWindowHint);由于现代的窗口风格&#xff0c;我们一般会设置窗口为圆角边框的样式&#xff0c;我们可以使用qss的方式来进行设置。 …

WebAPI(一)之DOM操作元素属性和定时器

webAPI之DOM操作元素属性和定时器 介绍概念DOM 树DOM 节点document 获取DOM对象操作元素内容操作元素属性常用属性修改控制样式属性操作表单元素属性自定义属性 间歇函数今日单词 了解 DOM 的结构并掌握其基本的操作&#xff0c;体验 DOM 的在开发中的作用 知道 ECMAScript 与 …

鱼骨图功能实现

dom: <div class="module-content"><div class="title"><span>[</span><p>鱼骨图</p><span>]</span></div><div class="line-mian"></div><div :ref="module + i&q…

Francek Chen 的128天创作纪念日

目录 Francek Chen 的128天创作纪念日机缘收获日常成就憧憬 Francek Chen 的128天创作纪念日 Francek Chen 的个人主页 机缘 不知不觉的加入CSDN已有两年时间了&#xff0c;最初我第一次接触CSDN技术社区是在2022年4月的时候&#xff0c;通过学长给我们推荐了几个IT社区平台&a…

Redis数据库——主从、哨兵、群集

目录 前言 一、主从复制 1.基本原理 2.作用 3.流程 4.搭建主动复制 4.1环境准备 4.2修改主服务器配置 4.3从服务器配置&#xff08;Slave1和Slave2&#xff09; 4.4查看主从复制信息 4.5验证主从复制 二、哨兵模式——Sentinel 1.定义 2.原理 3.作用 4.组成 5.…

数字逻辑分析仪初体验

为啥会用到这玩意儿&#xff0c;要从一个荒诞的需求开始。想在市面上找一款特别低空飞行的监控&#xff0c;而且不想它一直开着监控&#xff0c;最好是我在外面远程指挥它起飞&#xff0c;飞去厨房&#xff0c;飞去洗手间&#xff0c;甚至飞去阳台&#xff0c;查看水龙头情况啊…

【力扣白嫖日记】1435.制作会话柱状图

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1435.制作会话柱状图 表&#xff1a;Sessions 列名类型session_idintdurationint session_id 是该表主键,d…

技术驱动下的同城O2O发展:跑腿配送APP开发教学

在同城生活服务领域&#xff0c;跑腿配送APP的出现与发展&#xff0c;为人们的日常生活提供了极大的便利。今天&#xff0c;小编将着重为大家讲解技术驱动下的同城O2O发展&#xff0c;并从跑腿配送APP的开发角度进行教学和解析。 一、同城O2O发展概述 在同城O2O模式中&#x…

摆动序列(力扣376)

文章目录 题目前知题解一、思路二、解题方法三、Code 总结 题目 Problem: 376. 摆动序列 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元…

《web应用技术》第二次课后练习

练习目的&#xff1a; 1、form表单值的获取 2、mysql数据库及表的建立&#xff08;参见视频&#xff09; 3、maven项目的建立&#xff08;参见视频&#xff09; 4、使用jdbc进行数据库的增删改查操作。&#xff08;参见源代码&#xff09; 具体如下&#xff1a; 1、继续理…

mysql dublewrite 双写缓存机制

mysql dublewrite 双写缓存机制&#xff0c;像不像主板双bois系统&#xff0c; 在MySQL的InnoDB存储引擎中&#xff0c;当进行数据写操作时&#xff0c;会先将数据写入到内存中的缓冲池&#xff08;Buffer Pool&#xff09;&#xff0c;然后异步刷新到磁盘上的数据文件。为了提…

怎么在UE过场动画中加入振动效果

我们已经学会了怎么在游戏中加入振动效果&#xff0c;比较典型的交互场景如&#xff1a;在开枪时让手柄同步振动&#xff0c;实现起来真的很简单&#xff0c;就是定义场景和事件&#xff0c;然后在游戏事件发生时播放特定的振动资源文件&#xff0c;跟播放音效是极其相似的&…

如何把学浪app的视频保存本地

如何把学浪app里面的视频保存到本地&#xff0c;其实很简单&#xff0c;只需要用到一个工具&#xff0c;那就是小浪助手.exe 这里我已经把小浪助手.exe打包好了&#xff0c;有需要得话自己下载 链接&#xff1a;https://pan.baidu.com/s/1y7vcqILToULrYApxfEzj_Q?pwdkqvj 提…

客户银行主数据批导

程序&#xff1a;ZSDR0005 *&---------------------------------------------------------------------* *& Report ZSDR0005 *&---------------------------------------------------------------------* *& *&----------------------------------------…

深入研究:我国工业实时操作系统的核心技术与演进路径

实时操作系统&#xff08;RTOS&#xff09;在各类工业场景中发挥着中枢神经系统的关键作用&#xff0c;是数字化工业的重要基础。当前&#xff0c;全球大部分工业实时操作系统市场被国外厂商占据&#xff0c;围绕主流RTOS产品内核提供了完备的上下游软件配套&#xff0c;并以嵌…

目标检测标签分配策略,难样本挖掘策略

在目标检测任务中&#xff0c;样本的划分对于模型的性能具有至关重要的影响。其中&#xff0c;正样本指的是包含目标物体的图像或区域&#xff0c;而负样本则是不包含目标物体的图像或区域。然而&#xff0c;在负样本中&#xff0c;有一部分样本由于其与正样本在特征上的相似性…