vue中 字体图标引入 - iconfont阿里字体图标库

news2024/11/24 0:33:14

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

代码应用中,有许多方法,如何使用该图标库。如,icon单个使用、unicode引用、或 font-class引用(推)、symbol(svg合集)。本文主讲 font-class 方法。

font-class引用

支持ie8+,及所有浏览器

1. 获得项目下面的 fontclass 代码

加入库 -> 选择完所需的图标后,右上角的购物车 -> 添加到项目 -> 自动跳转至 我的项目,点击Font class -> 点击复制代码(!!这个才是你项目的代码

2.  在项目的 index.html 文件中导入,链接为1.中的fontclass代码

<link rel="stylesheet" href="fontclass代码" />

3. 使用 - 在页面中,使用 <i class='iconfont icon-xxx'></i> 进行应用(其中,iconfont是基础样式类名,icon-xxx是具体目标类名)

 

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

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

相关文章

C#,《小白学程序》第十六课:随机数(Random)第三,正态分布的随机数的计算方法与代码

1 随机数的问题 用 C# Random 类生成的随机数是平均分布的。也就是各数据段的出现的次数差不多。彩票号码属于这种随机数。 而很多很多常见的随机数&#xff0c;比如&#xff1a;成绩&#xff0c;却是符合正态分布的。 因而很多时候需要生成符合正态分布规律的随机数。 2 文…

JavaFx之Hello, World!

当使用 JavaFX 进行应用程序开发时&#xff0c;Application 类是一个关键组件。它是 JavaFX 应用程序的入口点&#xff0c;负责启动应用程序并设置应用程序的主舞台&#xff08;Stage&#xff09;和场景&#xff08;Scene&#xff09;。下面是一个详细介绍 Application 类并带有…

MySQL——锁

简介 多线程访问共享资源的时候&#xff0c;避免不了资源竞争而导致数据错乱的问题&#xff0c;所以我们通常为了解决这一问题&#xff0c;都会在访问共享资源之前加锁。 锁的分类 Mysql中的锁机制基本上都是采用的悲观锁来实现的。 行锁 行锁就是一锁锁一行或者多行记录&a…

【Spatial-Temporal Action Localization(一)】认识时空动作定位

文章目录 任务定义任务难点数据集任务现状评估指标可以思考的创新的角度 不错的博客&#xff0c;还有框架推荐 南京大学开源MultiSports&#xff1a;面向体育运动场景的细粒度多人时空动作检测数据集… 论文阅读推荐、Video Understanding&#xff08;3&#xff09;Spatio-Te…

d3dcompiler_47.dll缺失怎么修复,这个方法电脑小白也能学会

在计算机领域&#xff0c;d3dcompiler_47.dll文件是DirectX的一部分&#xff0c;用于执行硬件加速的图形渲染。当遇到“找不到d3dcompiler_47.dll丢失”的问题时&#xff0c;通常表示系统缺少此文件或其路径设置不正确。本文将介绍一些详细解决方法&#xff0c;帮助您解决这个问…

外观数列问题

给定一个正整数 n &#xff0c;输出外观数列的第 n 项。 「外观数列」是一个整数序列&#xff0c;从数字 1 开始&#xff0c;序列中的每一项都是对前一项的描述。 你可以将其视作是由递归公式定义的数字字符串序列&#xff1a; countAndSay(1) "1" countAndSay(n…

Docker的架构描述与安装部署

概述 Docker是一个开放的容器化平台&#xff0c;其提供能力轻松地支撑业务应用的开发、打包、装载、分发以及运行&#xff0c;在DevOps领域中&#xff0c;docker能高效地应对业务应用的持续集成以及持续发布&#xff08;CI/CD&#xff09;&#xff0c;其架构如下所示&#xff…

2023金九银十必看前端面试题!2w字精品!

文章目录 导文CSS1. 请解释CSS的盒模型是什么&#xff0c;并描述其组成部分。2. 解释CSS中的选择器及其优先级。3. 解释CSS中的浮动&#xff08;float&#xff09;是如何工作的&#xff0c;并提供一个示例。4. 解释CSS中的定位&#xff08;position&#xff09;属性及其不同的取…

机器人制作开源方案 | 桌面级机械臂--应用设计

本节内容将基于机器视觉带着大家进行应用实训。机器视觉是人工智能正在快速发展的一个分支&#xff0c;简单说来机器视觉就是用机器代替人眼来做测量和判断。机器视觉系统是通过机器视觉产品&#xff08;即图像摄取装置&#xff0c;分CMOS和CCD两种&#xff09;将被摄取目标转换…

Spring声明式事务

编程式事务 Spring-tx 声明式事务可以理解为对编程式事务的一个封装 spring-tx 使用多态的形式,满足不同类型的事务需求 【尚硅谷新版SSM框架全套视频教程&#xff0c;Spring6SpringBoot3最新SSM企业级开发】https://www.bilibili.com/video/BV1AP411s7D7?p60&vd_source7…

【算法与数据结构】98、LeetCode验证二叉搜索树

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;注意不要落入下面你的陷阱&#xff0c;笔者本来想左节点键值<中间节点键值<右节点键值即可&…

微信小程序支付

当下&#xff0c;微信小程序十分火爆&#xff0c;现在无论是购物还是生活服务&#xff0c;都是推荐你使用微信小程序&#xff0c;主要是它无需下载安装就可以使用&#xff0c;让手机变得非常清爽&#xff0c;给用户也带来很大的方便之处。 今天给大家分享的是&#xff0c;微信…

win10 任务栏预览设置为列表效果

背景 在win10系统&#xff0c;当同一个应用&#xff08;如文件资源管理器&#xff0c;git bash&#xff0c;word等&#xff09;打开多个页面时&#xff0c;当个数少于17&#xff08;大约&#xff09;个时&#xff0c;其默认预览效果为平铺&#xff0c;在大于17个时&#xff0c…

【Android知识笔记】UI体系(四)

事件分发原理 屏幕事件会由Linux通过JNI传给WMS(WindowManagerService),然后由WMS传给Activity,最终经过PhoneWindow->DecorView开始往下分发。 View的事件分发 View的事件分发核心源码为 dispatchTouchEvent() 方法: public boolean dispatchTouchEvent(MotionEvent …

如何制作非对称型加密

非对称加密是一种常见的加密方式&#xff0c;它使用一对密钥&#xff1a;公钥和私钥。下面是一种制作非对称加密的基本步骤&#xff1a; 首先&#xff0c;生成一对公钥和私钥。公钥是用于加密的&#xff0c;可以公开给其他人使用&#xff0c;而私钥是用于解密的&#xff0c;需要…

1-centOS7搭建伪分布式

前言&#xff1a;虚拟机快照的使用 VMware Workstation 软件可以用快照进行迅速的虚拟机状态的切换 ※. 类似于虚拟机备份&#xff0c; 可以使用备份进行快速恢复。 比如没安装jdk之前拍摄快照来备份 ※. 若jdk没安装好或者jdk环境变量配置的有问题&#xff0c; 可以用安装之…

【C语言基础】那些你可能不知道的C语言“潜规则”

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

公务员和事业单位的差别有多大?

公务员和事业单位是两种不同的就业形式和组织类型&#xff0c;它们在以下几个方面存在一些差别&#xff1a; 1. 归属关系&#xff1a;公务员属于政府部门的编制人员&#xff0c;直接依附于政府机构。而事业单位是独立法人实体&#xff0c;独立承担法人责任&#xff0c;不隶属于…

2023年-暑期旅行的复盘(0701~0820)

目录 一、旅行城市及线路图&#xff08;22&#xff09;二、3个战略目标三、旅行 3 原则四、数据统计五、总结附录1-消费明细-南方&#xff08;0701~0725&#xff09;7月1日----深圳7月2日----香港7月3日----深圳7月4日----佛山7月5日----澳门7月6日----深圳7月7日----福州7月8日…

趣链BaaS服务平台调研

目录 一、菜单功能二、其他说明2.1、服务平台的部署方式2.2、链本身2.3、核心使用流程 趣链hyperchain管理平台文档地址&#xff1a;https://docs.hyperchain.cn/document/overview?type1 一、菜单功能 菜单子菜单/功能点子菜单/功能点功能描述控制台平台概览主要用于展示当…