【Vue】前端项目引入阿里图标

news2024/11/15 20:01:20

【Vue&React】前端项目引入阿里图标

  • 方式1
    • 1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;
    • 2、加入并进入到项目中去选择Font class 并下载到本地
    • 3、得到的文件夹如下
    • 4. 把红框中的部分粘贴到自己的项目中( static或assects文件目录下);
    • 5、在入口文件main.js内全局引入,注意引入路径要正确
    • 6. 项目中使用图标
  • 方式2
    • 1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;
    • 2、加入并进入到项目中去选择Font class点击复制代码
    • 3、在index.html文件加入链接
    • 4、项目中使用图标

方式1

1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;

在这里插入图片描述

2、加入并进入到项目中去选择Font class 并下载到本地

在这里插入图片描述

3、得到的文件夹如下

在这里插入图片描述

4. 把红框中的部分粘贴到自己的项目中( static或assects文件目录下);

在这里插入图片描述

5、在入口文件main.js内全局引入,注意引入路径要正确

import './assets/icons/iconfont/iconfont.css'    // 引入阿里云字体图标css

6. 项目中使用图标

//注意:iconfont是固定的,icon-sousuokuang为图片红框部分
<i class="iconfont icon-sousuokuang" />

注意:iconfont是固定的,icon-sousuokuang为图片红框部分
在这里插入图片描述

方式2

1、登录自己的iconfont-阿里巴巴矢量图标库,把需要的图标加入到自己的项目中去;

在这里插入图片描述

2、加入并进入到项目中去选择Font class点击复制代码

  • 重点注意!!!记得先点击更新代码再点击复制获取得到链接,在开发中,有一个坑,有些同学中途在图标项目中添加了新的图标,然后没有及时更新获取链接,导致使用新图标时不显示。
    在这里插入图片描述

3、在index.html文件加入链接

  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4104784_spsvimhs68q.css" />

4、项目中使用图标

//引入图标组件,注意路径
 <i class="iconfont icon-ceshi"></i>

注意:你的class名字iconfont 为固定 icon-ceshi为图片红框部分
在这里插入图片描述

最后,如果帮到您
在这里插入图片描述

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

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

相关文章

2万块的郎酒,都是我们惯的

文 | 琥珀酒研社 作者 | 五画 当我看到郎酒拿出快2万一瓶纪念酒的时候&#xff0c;我就知道&#xff0c;这场高价酒的喧嚣和吵闹&#xff0c;又到了一个新的高度。 和别的行业有所不同&#xff0c;白酒很少谈智商税&#xff0c;再高的价格&#xff0c;总有个冠冕堂皇的理由。…

28个炫酷的纯CSS特效动画示例(含源代码)

CSS是网页的三驾马车之一&#xff0c;是对页面布局的总管家&#xff0c;2024年了&#xff0c;这里列出28个超级炫酷的纯CSS动画示例&#xff0c;让您的网站更加炫目多彩。 文章目录 1. 涌动的弹簧效果2. 超逼真的3D篮球弹跳&#xff0c;含挤压弹起模态3. 鼠标放div上&#xff0…

力扣hot100 数组中的第K个最大元素 堆 三路划分

Problem: 215. 数组中的第K个最大元素 文章目录 思路复杂度Code 思路 &#x1f468;‍&#x1f3eb; 参考 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( log ⁡ n ) O(\log{n}) O(logn) Code class Solution {public int findKthLargest(int[] nums, int k…

【Django自学】Django入门:如何使用django开发一个web项目(非常详细)

测试机器&#xff1a;windows11 x64 python版本&#xff1a;3.11 一、安装Django 安装步骤非常简单&#xff0c;使用pip安装就行 pip install django安装完成之后&#xff0c;python的 Scripts 文件夹下&#xff0c;会多一个 django-admin.exe (管理创建django项目的工具)。…

Linux其实不难,做个四层板设计的终端设备就搞懂了!

前言 想掌握一个技能&#xff0c;还得靠实践。 作者想学习Linux&#xff0c;于是边学边做&#xff0c;成功开源出了一个——还不错的 四层板设计的 终端设备。 项目成本可压缩至100元以内&#xff0c;便于复刻与参考学习&#xff01; 01 开源项目描述 做了一个基于V3S芯片的…

02-opencv简单实例效果和基本介绍-上

机器视觉概述 机器视觉是人工智能正在快速发展的一个分支。简单说来,机器视觉就是用机器代替人眼来做测量和判断。机器视觉系统是通过机器视觉产品(即图像摄取装置,分CMOS和CCD两种)将被摄取目标转换成图像信号,传送给专用的图像处理系统,得到被摄目标的形态信息,根据像素…

聚类(Clustering)理论

一、无监督学习介绍 在这小节中&#xff0c;我将开始介绍聚类算法&#xff0c;这是我们学习的第一个非监督学习算法&#xff0c;我们将要让计算机学习无标签数据而不是此前的标签数据。那么什么是非监督学习呢&#xff1f;在学习机器学习知识的开始我曾简单地介绍过非监督学习&…

【Algorithms 4】算法(第4版)学习笔记 02 - 1.4 算法分析

文章目录 前言参考目录学习笔记1&#xff1a;科学方法2&#xff1a;观察举例&#xff1a;三数之和3&#xff1a;近似4&#xff1a;增长数量级4.1&#xff1a;二分查找 demo4.2&#xff1a;二分查找代码实现4.3&#xff1a;二分查找比较次数的证明&#xff08;比较次数最多为lgN…

贪吃蛇的简易实现

技术要点 贪吃蛇的简易实现会运用到语⾔函数、枚举、结构体、动态内存管理、预处理指令、链表、Win32 API等,接下来首先简单介绍一下会运用到的东西。 Win32 API介绍 Windows 这个多作业系统除了协调应⽤程序的执⾏、分配内存、管理资源之外, 它同时也是⼀个很⼤的服务中⼼…

嵌入式工程师day15(链表)

内存管理 一.内存管理: 1.malloc void *malloc(size_t size); 功能: 申请堆区空间 参数: size:申请堆区空间的大小 返回值: 返回获得的空间的首地址 失败返回NULL 2.free void free(void *ptr); 功能: 释放…

机器学习-3降低损失(Reducing Loss)

机器学习-3降低损失(Reducing Loss) 学习内容来自&#xff1a;谷歌ai学习 https://developers.google.cn/machine-learning/crash-course/framing/check-your-understanding?hlzh-cn 本文作为学习记录1.降低损失&#xff1a;迭代方法 迭代学习 下图展示了机器学习算法用于训…

idea Statistic使用

问题描述&#xff1a;本地idea版本为2018.3.5&#xff0c;安装Statistic插件后没有出现Statistic图标 原因如下&#xff1a;插件版本太新了&#xff0c;需要历史版本 解决办法&#xff1a; IDEA安装代码统计插件Statistic后左下角图标出不来(亲测)_idea statistic不展示-CSD…

从入门到精通 MATLAB:这些学习网站是不错的选择!

介绍&#xff1a;MATLAB是一种高级的数学计算软件&#xff0c;专门用于算法开发、数据可视化、数据分析以及数值计算。它是MathWorks公司推出的产品&#xff0c;自1984年推向市场以来&#xff0c;已经成为科学计算和工程设计领域的重要工具。以下是MATLAB的主要特点&#xff1a…

【C++入门到精通】特殊类的设计 | 单例模式 [ C++入门 ]

阅读导航 引言一、设计模式概念&#xff08;了解&#xff09;二、单例模式1. 饿汉模式&#xff08;1&#xff09;概念&#xff08;2&#xff09;模拟实现&#xff08;3&#xff09;优缺点&#xff08;4&#xff09;适用场景 2. 懒汉模式&#xff08;1&#xff09;概念&#xff…

【C++进阶08】哈希的应用(位图and布隆过滤器)

一、位图 1.1 位图的概念 面试题 给40亿个不重复的无符号整数&#xff0c;没排过序 给一个无符号整数&#xff0c;如何快速判断一个数是否在 这40亿个数中。【腾讯】 能想到的解决思路&#xff1a; 遍历&#xff0c;时间复杂度O(N)排序(O(NlogN)) 利用二分查找: logN放到哈…

计算机毕业设计 | SpringBoot+vue 教务管理系统(附源码)

1&#xff0c;项目背景 教育需求增长 随着社会的发展&#xff0c;对于教育质量的要求也在不断提高。传统的手工操作和纸质记录已经不能满足现代教学的需求。因此&#xff0c;一个自动化、数字化的教务管理系统成为了必然的选择。 信息化趋势 现代科技的飞速发展使得信息化成为…

【算法】登山(线性DP,最长上升)

题目 五一到了&#xff0c;ACM队组织大家去登山观光&#xff0c;队员们发现山上一共有N个景点&#xff0c;并且决定按照顺序来浏览这些景点&#xff0c;即每次所浏览景点的编号都要大于前一个浏览景点的编号。 同时队员们还有另一个登山习惯&#xff0c;就是不连续浏览海拔相…

如何保证MySQL数据一致性

在当今大数据时代&#xff0c;数据库系统扮演着至关重要的角色&#xff0c;而MySQL作为一种流行的关系型数据库管理系统&#xff0c;在数据一致性方面拥有着丰富的机制和技术。下面简单的探讨MySQL是如何保证数据一致性的。 事务与ACID特性 要了解MySQL如何保证数据一致性&am…

excel中去掉单元格中两个数字之间的空格

excel中去掉单元格中两个数字之间的空格 使用公式&#xff1a;SUBSTITUTE(A1," “,”") 解释&#xff1a;将A1单元格中的空格查找出来并去掉。

香蕉派BPI-M7 瑞芯微RK3588 人工智能开源硬件开发板公开发售

香蕉派(Banana Pi) BPI-M7瑞芯微K3588开源硬件单板计算机公开销售&#xff0c;支持WiFi 6和BT5.2&#xff0c;硬件有3个版本:8G Ram64G eMMC, 16G Ram128 eMMC和32G Ram128 eMMC 香蕉派BPI-M7采用睿芯最新旗舰RK3588八核64位处理器&#xff0c;最高频率为2.4GHz, 6 TOPS NPU&…