当前位置： 首页 > news >正文

uni-app引用外部图标库（阿里矢量图）

news 2026/6/1 8:50:14

uni-app引用外部图标库（阿里矢量图）

作为前端程序员，nui-app是必备的，但是有时候内置的图标，组件又不完全满足，这里就可以引进外部图标，这里引用的是阿里矢量图标

第一步，在项目目录中新建文件夹，如图

第二步，登上阿里矢量图官网，将自己需要的图片先加入购物车，再点击右上角购物车 

 

 

第三部，将下载好的压缩包解压，打开文件，将 iconfont.css 和 iconfont.ttf 两个文件复制到新建的icon文件夹下 

第四步，回到阿里官网，进入购物车，将刚刚加的图标添加项目，没有可新建，这个无所谓 

 第五步，打开 iconfont.css ，将@font-face内容替换掉，并在//前加 https: ，替换好后如下图

 

第六部，页面应用

 

 效果图：

 

相关文章：

uni-app引用外部图标库（阿里矢量图）

uni-app引用外部图标库（阿里矢量图） 作为前端程序员，nui-app是必备的，但是有时候内置的图标，组件又不完全满足，这里就可以引进外部图标，这里引用的是阿里矢量图标 第一步，在项目目…...

编程日记 2023/8/3 9:22:59

day49-Todo List（待办事项列表）

50 天学习 50 个项目 - HTMLCSS and JavaScript day49-Todo List&#xff08;待办事项列表&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" co…...

编程日记 2023/8/3 9:21:58

寻找丢失数字：数学与位运算的解密之旅

本篇博客会讲解力扣“268. 丢失的数字”的解题思路&#xff0c;这是题目链接。 注意进阶中的描述&#xff1a;你能否实现线性时间复杂度、仅使用额外常数空间的算法解决此问题&#xff1f;这里我会讲解两种思路&#xff0c;它们的时间复杂度是O(N)&#xff0c;空间复杂度是O(1)…...

编程日记 2023/8/3 9:20:56

数论分块学习笔记

准备开始复习莫比乌斯反演&#xff0c;杜教筛这一部分&#xff0c;先复习一下数论分块 0.随便说说 数论分块可以计算如下形式的式子 ∑ i 1 n f ( i ) g ( ⌊ n i ⌋ ) \sum_{i1}^{n}f(i)g(\lfloor\frac{n}{i}\rfloor) ∑i1n​f(i)g(⌊in​⌋)。 利用的原理是 ⌊ n i ⌋ \lf…...

编程日记 2023/8/3 9:19:55

【基础理论】了解点过程

Maximum tsunami wave height generated by the 16 Sept. 2015 Chile earthquake, from the International Tsunami Information Center. Posted by Austin Elliott 一、说明 在这个世界上&#xff0c;会发生许多事件&#xff0c;其趋势可能遵循一种模式。在这篇博客中&#…...

编程日记 2023/8/3 9:18:53

深入理解Spring MVC中的@ResponseBody注解

引言 在现代的Web应用开发中&#xff0c;数据的传递和交互是不可或缺的一部分。Spring MVC作为一个强大的框架&#xff0c;在处理客户端请求和响应时&#xff0c;提供了许多注解来简化开发过程。其中&#xff0c;ResponseBody注解在处理方法的返回值时起到了关键作用&#xff0…...

编程日记 2023/8/3 9:17:52

大数据学习教程：Linux高级教程（下）

四、大数据集群服务器搭建 1. 新增Linux服务器 1.1、克隆虚拟机 学习环境中&#xff0c;一般使用VMware虚拟机克隆Linux系统&#xff0c;用来进行集群服务器的搭建。 VMware支持两种类型的克隆&#xff1a;完整克隆、链接克隆 完整克隆是和原始虚拟机完全独立的一个复制&…...

编程日记 2023/8/3 9:16:51

1.Oracle建表及使用

1.概述 1. 表&#xff1a;用于 存储数据 -- 是我们最常见的数据库对象 2. 表设计注意事项 (1) 表设计时&#xff0c;尽量遵从 第三范式&#xff08;3NF&#xff09; (2) 名称不能超过 30 个字符 -- 超过会报错 (3) 名称只能以 字母 大头&#xff0c;可由数字、 _、 $…...

编程日记 2023/8/3 9:15:47

《网络是怎样连接的》（二.2）

(6条消息) 《网络是怎样连接的》&#xff08;二.1&#xff09;_qq_38480311的博客-CSDN博客 本文主要取材于 《网络是怎样连接的》 第二章 2.5 2.6章节。 目录 简述&#xff1a; 本文的主要内容是 以太网的收发操作 和 UDP协议的收发操作。 IP与以太网的包收发操作 包是什…...

编程日记 2023/8/3 9:14:46

MySQL加密插件安装

加密插件 查看已经安装的插件&#xff1a;show plugs; 增加加密插件&#xff1a; 登陆MySQL后&#xff0c;通过show variables like ‘validate%’;查看相关验证规则。 ① 在配置文件中新增&#xff0c;[mysqld]标签下 plugin-load-addvalidate_password.so ② 在运行时新增…...

编程日记 2023/8/3 9:13:43

新手入门Jenkins自动化部署入门详细教程

1. 背景 在实际开发中&#xff0c;我们经常要一边开发一边测试&#xff0c;当然这里说的测试并不是程序员对自己代码的单元测试&#xff0c;而是同组程序员将代码提交后&#xff0c;由测试人员测试&#xff1b; 或者前后端分离后&#xff0c;经常会修改接口&#xff0c;然后重新…...

编程日记 2023/8/3 9:12:42

Neural Network学习笔记4

完整的模型训练套路 train.py import torch import torchvision from torch.utils.data import DataLoader # 引入自定义的网络模型 from torch.utils.tensorboard import SummaryWriterfrom model import *# 准备数据集 train_data torchvision.datasets.CIFAR10(root"…...

编程日记 2023/8/3 9:11:41

[转]关于cmake --build .的理解

https://blog.csdn.net/qq_38563206/article/details/126486183 https://blog.csdn.net/HandsomeHong/article/details/120170219 cmake --build . 该命令的含义是&#xff1a;执行当前目录下的构建系统&#xff0c;生成构建目标。 cmake项目构建过程简述: 1. 首先&#xf…...

编程日记 2023/8/3 9:10:39

【Linux下6818开发板（ARM）】硬件空间挂载

(꒪ꇴ꒪ ),hello我是祐言博客主页&#xff1a;C语言基础,Linux基础,软件配置领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff01;送给读者的一句鸡汤&#x1f914;&#xff1a;集中起来的意志可以击穿顽石!作者水平很有限&#xff0c;如果发现错误&#x…...

编程日记 2023/8/3 9:09:38

剑指offer 动态规划篇

题目由入门往上递增 入门 斐波那契数列_牛客题霸_牛客网 (nowcoder.com) 动态规划甚至于算法的入门题目 方法一&#xff1a;按照斐波那契的公式fnfn-1fn-2&#xff0c;从1-n求出结果。 class Solution { public:int Fibonacci(int n) {vector<int>f{0,1,1};for(int …...

编程日记 2023/8/3 9:08:35

关于Linux中前端负载均衡之VIP(LVS+Keepalived)自动化部署的一些笔记

写在前面 整理一些 LVS 相关的笔记理解不足小伙伴帮忙指正 傍晚时分&#xff0c;你坐在屋檐下&#xff0c;看着天慢慢地黑下去&#xff0c;心里寂寞而凄凉&#xff0c;感到自己的生命被剥夺了。当时我是个年轻人&#xff0c;但我害怕这样生活下去&#xff0c;衰老下去。在我看来…...

编程日记 2023/8/3 9:07:34

C++ 拷贝交换技术示例

拷贝交换技术&#xff08;copy and swap&#xff09;是什么&#xff0c;网上估计能查到很多。但网上有点难找到完整的演示代码&#xff0c;所以这里记录一下。难点在于&#xff1a; 如果要满足 5 的原则&#xff0c;我到底要写那些函数&#xff1f; 默认构造函数、复制构造函数…...

编程日记 2023/8/3 9:06:27

使用 Go 语言实现二叉搜索树

原文链接&#xff1a; 使用 Go 语言实现二叉搜索树 二叉树是一种常见并且非常重要的数据结构&#xff0c;在很多项目中都能看到二叉树的身影。 它有很多变种&#xff0c;比如红黑树&#xff0c;常被用作 std::map 和 std::set 的底层实现&#xff1b;B 树和 B 树&#xff0c;…...

编程日记 2023/8/3 9:05:26

系统接口自动化测试方案

XXX接口自动化测试方案 1、引言 1.1 文档版本 版本 作者 审批 备注 V1.0 XXXX 创建测试方案文档 1.2 项目情况 项目名称 XXX 项目版本 V1.0 项目经理 XX 测试人员 XXXXX&#xff0c;XXX 所属部门 XX 备注 1.3 文档目的 本文档主要用于指导XXX-Y…...

编程日记 2023/8/3 9:04:23

小研究 - JVM 垃圾回收方式性能研究（一）

本文从几种JVM垃圾回收方式及原理出发&#xff0c;研究了在 SPEC jbb2015基准测试中不同垃圾回收方式对于JVM 性能的影响&#xff0c;并通过最终测试数据对比&#xff0c;给出了不同应用场景下如何选择垃圾回收策略的方法。 目录 1 引言 2 垃圾回收算法 2.1 标记清除法 2.2…...

编程日记 2023/8/3 9:03:21

组态王通用扫码枪配置

使用组态王扫码枪驱动&#xff0c;是绑定变量&#xff0c;扫码后直接就可以显示扫码内容。解决每次扫码输入数据时必须先用鼠标点进输入框内的问题。驱动安装先添加驱动&#xff0c;亚控网站的文件为 barcodescanner&#xff0c;这个文件是组态王通用扫码枪的驱动&#xff0c;但…...

编程新知 2026/5/26 1:08:56

双系统Ubuntu磁盘告急？别重装！用GParted无损扩容保姆级教程（附U盘启动盘制作）

双系统Ubuntu磁盘告急&#xff1f;别重装&#xff01;用GParted无损扩容保姆级教程&#xff08;附U盘启动盘制作&#xff09;当你在Windows和Ubuntu双系统环境下工作时&#xff0c;是否遇到过这样的窘境&#xff1a;当初安装时给Ubuntu分配的空间捉襟见肘&#xff0c;而Windows…...

编程新知 2026/5/26 0:12:06

企业内统一API网关与Taotoken聚合平台对接方案

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 企业内统一API网关与Taotoken聚合平台对接方案 在推进AI应用落地的过程中&#xff0c;许多中大型企业面临一个共同挑战&#xff1a…...

编程新知 2026/5/25 22:14:20

如何快速集成 react-native-bottom-sheet-behavior：5 分钟搞定 Android 底部弹窗

如何快速集成 react-native-bottom-sheet-behavior&#xff1a;5 分钟搞定 Android 底部弹窗 【免费下载链接】react-native-bottom-sheet-behavior react-native wrapper for android BottomSheetBehavior 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom…...

编程新知 2026/5/25 21:43:58

3分钟快速安装BetterNCM插件管理器，让你的网易云音乐功能翻倍

3分钟快速安装BetterNCM插件管理器&#xff0c;让你的网易云音乐功能翻倍 【免费下载链接】BetterNCM-Installer 一键安装 Better 系软件 项目地址: https://gitcode.com/gh_mirrors/be/BetterNCM-Installer 还在为网易云音乐功能单一而烦恼吗&#xff1f;想要解锁更多个…...

编程新知 2026/5/25 21:07:32

SpeakingURL版本升级指南：从旧版本迁移到最新版本的完整教程

SpeakingURL版本升级指南&#xff1a;从旧版本迁移到最新版本的完整教程 【免费下载链接】speakingurl Generate a slug – transliteration with a lot of options 项目地址: https://gitcode.com/gh_mirrors/sp/speakingurl SpeakingURL是一款强大的URL友好化工具&…...

编程新知 2026/5/25 18:06:04

ZYNQ中断避坑指南：PL端信号线如何正确‘连线’到PS端处理函数？

ZYNQ中断系统深度解析&#xff1a;从硬件信号到软件响应的全链路实践 在嵌入式系统开发中&#xff0c;中断处理是实时响应的核心机制。对于ZYNQ这种集成了ARM处理器(PS)和可编程逻辑(PL)的异构计算平台&#xff0c;其中断系统既有传统处理器的特性&#xff0c;又具备FPGA灵活定…...

编程新知 2026/5/25 17:15:18

Unity动态植被系统：实时天气与自然现象耦合方案

1. 这不是“贴图堆砌”&#xff0c;而是一套可交互的自然系统你有没有试过在Unity里拖进几棵树、铺点草地&#xff0c;结果运行起来——风一吹&#xff0c;所有树叶像被钉在空中一样纹丝不动&#xff1b;下雨时&#xff0c;雨滴垂直砸进地面&#xff0c;连个水花都没有&#xf…...

编程新知 2026/5/25 14:40:38

Qri入门教程：如何在5分钟内开始使用分布式数据集版本控制

Qri入门教程&#xff1a;如何在5分钟内开始使用分布式数据集版本控制 【免费下载链接】qri youre invited to a data party! 项目地址: https://gitcode.com/gh_mirrors/qr/qri Qri是一款强大的分布式数据集版本控制工具&#xff0c;它比电子表格更强大&#xff0c;比数…...

编程新知 2026/5/25 13:57:58

024、NPU指令集架构（ISA）概述：从CISC到VLIW

024、NPU指令集架构（ISA）概述：从CISC到VLIW 去年冬天调试一块国产NPU芯片的卷积算子，跑ResNet-50前向推理，死活比理论算力低了一个数量级。抓了三天波形，最后发现是指令发射槽的冲突——两条MAC指令争同一个数据总线，硬件自动插入三个空泡周期。那一刻我盯着逻辑分析仪…...

编程新知 2026/5/25 13:03:44