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

uni-app引用外部图标库(阿里矢量图)

uni-app引用外部图标库(阿里矢量图)

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

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

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

 

 

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

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

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

 

第六部,页面应用

 

 效果图:

 

相关文章:

uni-app引用外部图标库(阿里矢量图)

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

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

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

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

数论分块学习笔记

准备开始复习莫比乌斯反演&#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…...

【基础理论】了解点过程

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

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

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

大数据学习教程:Linux高级教程(下)

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

1.Oracle建表及使用

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

《网络是怎样连接的》(二.2)

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

MySQL加密插件安装

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

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

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

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"…...

[转]关于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…...

【Linux下6818开发板(ARM)】硬件空间挂载

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

剑指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 …...

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

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

C++ 拷贝交换技术示例

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

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

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

系统接口自动化测试方案

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

小研究 - JVM 垃圾回收方式性能研究(一)

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

云顶之弈策略优化工具:TFT Overlay如何提升游戏决策效率

云顶之弈策略优化工具&#xff1a;TFT Overlay如何提升游戏决策效率 【免费下载链接】TFT-Overlay Overlay for Teamfight Tactics 项目地址: https://gitcode.com/gh_mirrors/tf/TFT-Overlay 在云顶之弈激烈的对战中&#xff0c;玩家常常面临装备合成路径混乱、羁绊触发…...

好写作AI|避免“AI味”过重:硕士初稿中的人机协同写作技巧

家人们&#xff0c;谁懂啊&#xff1f; 你兴冲冲地把用AI写的初稿交给导师&#xff0c;结果导师只看了一页&#xff0c;就皱起眉头&#xff1a; “这段是你自己写的还是AI写的&#xff1f;” 你心里咯噔一下&#xff0c;强装镇定&#xff1a;“我自己写的啊……” 导师&#xf…...

Cursor 高级技巧:@符号、Chat 模式与多文件编辑

前言 经过前两天的学习&#xff0c;你已经掌握了 Cursor 的基本用法&#xff0c;能用 CmdK 做单文件修改&#xff0c;用 Tab 自动补全代码。但 Cursor 真正强大的地方&#xff0c;在于它构建了一套以 AI 为中心的上下文感知系统——让 AI 不再是"盲写"&#xff0c;而…...

终极Google Drive下载解决方案:专业级gdrivedl实战指南

终极Google Drive下载解决方案&#xff1a;专业级gdrivedl实战指南 【免费下载链接】gdrivedl Google Drive Download Python Script 项目地址: https://gitcode.com/gh_mirrors/gd/gdrivedl Google Drive文件下载是许多开发者和技术爱好者面临的常见挑战&#xff0c;特…...

上海计算机学会2026年2月月赛C++丙组T1 乘积的秘密

乘积的秘密 题目描述 给定两个整数 A 与 B&#xff0c;保证 A ≤ B。请求出从 A 一直乘到 B 的符号&#xff1a; 如果乘积大于 0&#xff0c;输出 Positive&#xff1b;如果乘积小于 0&#xff0c;输出 Negative&#xff1b;如果乘积等于 0&#xff0c;输出 Zero。 输入格式 两…...

收藏 | 传统程序员转型AI Agent工程师:未来最值钱的程序员是这类人

文章探讨了传统程序员在AI时代面临的转型问题&#xff0c;提出AI Agent工程师是未来趋势。文章指出&#xff0c;AI Agent工程师的核心能力并非模型本身&#xff0c;而是构建稳定自动化系统的系统工程能力&#xff0c;包括工具编排、状态管理、权限控制等。文章建议传统程序员通…...

STM32压力传感器统一驱动:BMP280/MS5803/ADS1115/SDP3x

目录 一、4 款传感器 典型应用场景 二、统一软件工程接口&#xff08;标准 C 语言&#xff0c;可直接用&#xff09; 1. 通用结构体&#xff08;所有传感器统一格式&#xff09; 三、4 款传感器 完整驱动 校准接口 1. BMP280 气压 / 温度 应用&#xff1a;环境气压、高度…...

为什么钉钉、飞书、企微都在做 CLI?这个开源项目给出了最极致的答案

❝AI Agent 很聪明&#xff0c;但面对真实的专业软件&#xff0c;它就是个"睁眼瞎"。CLI-Anything 说&#xff1a;我来治。❞先说一个扎心的事实2026年了&#xff0c;AI Agent 能写代码、能做分析、能聊天能画画——但你让它打开 Blender 建个模&#xff1f;让它用 G…...

AI在测试中的应用:从测试用例生成到缺陷预测

随着软件开发流程向敏捷与DevOps的持续演进&#xff0c;软件测试面临着迭代周期缩短、系统复杂度飙升的双重压力。传统的测试方法&#xff0c;高度依赖人工经验与重复劳动&#xff0c;在效率、覆盖率和预测性上逐渐显现瓶颈。人工智能技术的引入&#xff0c;正从辅助工具演变为…...

珠海内有哪些做专精特新,创新型中小企业。权代理事务通过率高

在珠海&#xff0c;众多专精特新、创新型中小企业在发展过程中&#xff0c;知识产权代理事务变得尤为重要&#xff0c;而珠海飞拓知识产权代理事务凭借其独特优势&#xff0c;成为了高通过率的代表。企业痛点催生专业服务在专精特新、创新型中小企业培育与申报过程中&#xff0…...