如何在vue的项目中导入阿里巴巴图标库

news2024/9/27 5:56:17

阿里巴巴矢量图标库官网:iconfont-阿里巴巴矢量图标库

选择你喜欢的图标,添加入库

点击添加至项目,并新建文件夹,点击确定

      

选择font-class,点击生成代码

代码生成后,在网站上打开

全选复制到style

点击复制代码,替换icon-xxx<i class="iconfont icon-xxx"></i>

最后变成<i class="iconfont icon-xihuan"></i>,就可以使用了

注:调节大小和修改颜色

调节大小(修改font-size的大小即可)

修改颜色(有色图标有时会没有颜色)

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

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

相关文章

Agents 要点

一、Agents概念 人类是这个星球上最强大的 Agent。Agent是一个能感知并自主地采取行动的实体&#xff0c;这里的自主性极其关键&#xff0c;Agent要能够实现设定的目标&#xff0c;其中包括具备学习和获取知识的能力以提高自身性能。 关键点&#xff1a;感知环境、自主决策、具…

SpringBoot新手快速入门系列教程十一:基于Docker Compose部署一个最简单分部署服务项目

如果您还对于Docker或者Docker Compose不甚了解&#xff0c;可以劳烦移步到我之前的教程&#xff1a; SpringBoot新手快速入门系列教程九&#xff1a;基于docker容器&#xff0c;部署一个简单的项目 SpringBoot新手快速入门系列教程十&#xff1a;基于Docker Compose&#xf…

CSS特效:pointer-events: none;的一种特殊应用

一、需求描述 今天看到一个设计需求&#xff1a;需要在弹框中显示如下界面&#xff0c;其中有两个效果&#xff1a; 1.顶部点击项目&#xff0c;下面的内容能相应滚动定位&#xff0c;同时滚动的时候顶部项目也能相应激活显示 2.顶部右侧有一个模糊渐变效果&#xff0c;并且要…

day29--452. 用最少数量的箭引爆气球+435. 无重叠区间+763.划分字母区间

一、452. 用最少数量的箭引爆气球 题目链接&#xff1a;https://leetcode.cn/problems/minimum-number-of-arrows-to-burst-balloons/ 文章讲解&#xff1a;https://programmercarl.com/0452.%E7%94%A8%E6%9C%80%E5%B0%91%E6%95%B0%E9%87%8F%E7%9A%84%E7%AE%AD%E5%BC%95%E7%88…

ISO/OIS的七层模型②

OSI模型是一个分层的模型&#xff0c;每一个部分称为一层&#xff0c;每一层扮演固定的角色&#xff0c;互不干扰。OSI有7层&#xff0c;从上到下分别是&#xff1a; 一&#xff0c;每层功能 7.应用层&#xff08;Application layer &#xff09;&#xff1a;应用层功能&#x…

AI克隆声音,基于函数计算部署GPT-Sovits语音生成模型

阿里云的 https://developer.aliyun.com/adc/scenario/808348a321844a62b922187d89cd5077 还是 函数计算 FC (aliyun.com) 选择 语音克隆生成 GPT-SOVITS 通过访问域名就能访问 就可以上传个人的声音&#xff0c;然后进行输出 。

【第29章】MyBatis-Plus之分页插件

文章目录 前言一、支持的数据库二、配置方法三、属性介绍四、自定义 Mapper 方法中使用分页五、其他注意事项六、Page 类七、实战1. 配置类2. 分页类3. 测试 总结 前言 MyBatis-Plus 的分页插件 PaginationInnerInterceptor 提供了强大的分页功能&#xff0c;支持多种数据库&a…

SpringBoot3+Vue3开发园区管理系统

介绍 在当今快速发展的城市化进程中&#xff0c;高效、智能的园区管理成为了提升居民生活品质、优化企业运营环境的关键。为此&#xff0c;我们精心打造了全方位、一体化的园区综合管理系统&#xff0c;该系统深度融合了园区管理、楼栋管理、楼层管理、房间管理以及车位管理等…

openlayers WebGL裁剪图层,双图层拼接显示

本篇介绍一下使用openlayers WebGL裁剪图层&#xff0c;双图层拼接显示 1 需求 WebGL裁剪图层&#xff0c;双图层拼接显示 2 分析 图层prerender和postrender事件的使用 WebGL scissor方法的使用 scissor方法指定了一个裁剪区域&#xff0c;用来将绘图区域限制在其限定的盒…

深度学习中的超参管理方法:argparse模块

在深度学习方法中我们不可避免地会遇到大量超参数如&#xff08;batch_size、learning_rate等&#xff09;。不同的超参数组合可以得到不同的训练/测试结果。所以在训练和测试过程中我们需要不断调整超参数获得理想的结果&#xff08;炼丹&#xff09;&#xff0c;如果每一次去…

设备管理中的数据结构

一、有哪些数据结构属于设备管理数据结构 1. 设备控制表&#xff08;DCT&#xff09; “Device Control Table”的首字母缩写 2. 控制器控制表&#xff08;COCT&#xff09; “Controller Of Control Table”的首字母缩写。 3. 通道控制表&#xff08;CHCT&#xff09; “…

简单实现一个本地ChatGPT web服务(langchain框架)

简单实现一个本地ChatGPT 服务&#xff0c;用到langchain框架&#xff0c;fastapi,并且本地安装了ollama。 依赖安装&#xff1a; pip install langchain pip install langchain_community pip install langchain-cli # langchain v0.2 2024年5月最新版本 pip install bs4 pi…

基于swagger插件的方式推送接口文档至torna

目录 一、前言二、登录torna三、创建/选择空间四、创建/选择项目五、创建/选择应用六、获取应用的token七、服务推送7.1 引入maven依赖7.2 test下面按照如下方式新建文件 一、前言 Torna作为一款企业级文档管理系统&#xff0c;支持了很多种接口文档的推送方式。官方比较推荐的…

基于EMQX+Flask+InfluxDB+Grafana打造多协议物联网云平台:MQTT/HTTP设备接入与数据可视化流程(附代码示例)

摘要: 本文深入浅出地介绍了物联网、云平台、MQTT、HTTP、数据可视化等核心概念&#xff0c;并结合 EMQX、Flask、InfluxDB、Grafana 等主流工具&#xff0c;手把手教你搭建一个支持多协议的物联网云平台。文章结构清晰&#xff0c;图文并茂&#xff0c;代码翔实易懂&#xff0…

Linux 入门教程 by 程序员鱼皮

本文作者&#xff1a;程序员鱼皮 免费编程学习 - 编程导航网&#xff1a;https://www.code-nav.cn 大家好&#xff0c;我是鱼皮。 前两天我学编程的老弟小阿巴过生日&#xff0c;我问他想要什么礼物。 本来以为他会要什么游戏机、Q 币卡、鼠标键盘啥的&#xff0c;结果小阿巴…

网关、DHCP协议、ip地址、子网掩码简单介绍

参考文章&#xff1a;https://baike.baidu.com/item/%E7%BD%91%E5%85%B3/98992?frge_ala https://baike.baidu.com/item/DHCP%E6%9C%8D%E5%8A%A1%E5%99%A8/9956953?fromModulelemma_inlink https://blog.csdn.net/weixin_58783105/article/details/135041342 https://blog.cs…

Spring系列三:基于注解配置bean 下

基于注解配置bean &#x1f497;自动装配&#x1f35d;案例1: Autowired引出&#x1f35d;案例2: Autowired解读&#x1f35a;案例3: Resource解读&#x1f35d;小结 &#x1f497;泛型依赖注入&#x1f35d;基本说明&#x1f35d;应用实例 &#x1f497;自动装配 ●基本说明 …

数据中心巡检机器人助力,河南某数据中心机房智能化辅助项目交付

随着数据中心规模的不断扩大和业务需求的不断增长&#xff0c;确保其高效、安全、稳定地运行变得愈发重要。传统的人力巡检方式存在效率低、误差高、成本大等问题&#xff0c;难以满足现代数据中心的需求。为解决这些挑战&#xff0c;智能巡检机器人应运而生&#xff0c;成为数…

应用最优化方法及MATLAB实现——第3章代码实现

一、概述 在阅读最优方法及MATLAB实现后&#xff0c;想着将书中提供的代码自己手敲一遍&#xff0c;来提高自己对书中内容理解程度&#xff0c;巩固一下。 这部分内容主要针对第3章的内容&#xff0c;将其所有代码实现均手敲一遍&#xff0c;中间部分代码自己根据其公式有些许的…

Windows系统MySQL的安装,客户端工具Navicat的安装

下载mysql安装包&#xff0c;可以去官网下载&#xff1a;www.mysql.com。点击downloads 什么&#xff1f;后面还有福利&#xff1f; 下载MySQL 下载企业版&#xff1a; 下载Windows版 5点多的版本有点低&#xff0c;下载8.0.38版本的。Window系统。下载下面的企业版。不下载…