vue2 引入阿里图标库iconfont

news/2024/12/5 12:39:39/

有时候我们使用的 ui 里面图标是不够丰富的,不一定可以满足我们的需求。

这时我们可以引入阿里图标库来丰富自己的项目图标。

上步骤:

1、点击文字地址连接:

iconfont-阿里巴巴矢量图标库

2、登录,没有账号需要先使用手机号注册一下。

 3、有明确需要的图标,可以通过搜索关键字进行搜索

 4、选择自己需要的 icon 图标并添加入库(鼠标划入图标即可看到)

 5、选择完成后,点击右上角购物车  (不需要付费)

6、选择 下载代码 按钮(不需要付费,会下载一个压缩包)

 7、将压缩包解压到项目中(我解压到了 /src/assets 中)

 8、将文件名称修改一下并将文件中 iconfont.css 文件引入 main.js 文件

文件名称修改为 font_icon ,原文件名称不利于阅读,修改文件名称是为了方便引入和查找

// 引入iconfont图标
import "../src/assets/font_icon/iconfont.css"

9、查看 iconfont.css 并使用图标。

iconfont.css 中有你需要的图标类名,将类名与 公共类名一起使用即可。

<i class="iconfont icon-weibiaoti--"></i>
<i class="iconfont icon-dengpao"></i>
<i class="iconfont icon-muluguanli"></i>


http://www.ppmy.cn/news/1365895.html

相关文章

Spring IOC在业务中常见的使用方式

目录 1、什么是IOC 2、java实现创建对象的方式有哪些 3、基于配置文件的di实现 3.1、什么是di 3.2、入门案例 3.3、环境搭建 接口和实现类 ioc配置文件 测试程序 3.4、案例总结 3.5、简单类型属性的赋值&#xff08;set注入&#xff09; set注入要求 JavaBean sp…

Leetcode : 215. 数组中的第 K 个最大元素

给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。 你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。 思路&#xff1a;最开始排序算法&…

vue中scss样式污染引发的思考

新做了一个项目&#xff0c;就是在登录后&#xff0c;就会产生左侧菜单的按钮颜色不一样。 然后发现样式是从这里传过来的 发现是登录页面的css给污染了 就是加了scope就把这个问题解决了 然后想总结一下这个思路&#xff1a;就是如何排查污染样式&#xff1a; 如果出现了…

个人如何合法自建服务器?

随着互联网技术的不断发展&#xff0c;越来越多的人开始考虑自建服务器&#xff0c;以满足自己的需求。但是&#xff0c;在自建服务器之前&#xff0c;必须了解相关的法律法规和规定&#xff0c;以确保自己的行为合法合规。本文将介绍个人如何合法自建服务器&#xff0c;以供参…

uniappQQ登录是如何实现的,请说明其流程

QQ登录功能的实现分成以下几个步骤&#xff1a; 注册QQ互联账号并创建应用&#xff0c;获取 appid 配置回调地址 recirect_uri在页面中放置 QQ登录按钮&#xff0c;点击按钮后跳转到 QQ 登录页面&#xff0c;链接地址是由 QQ 平台提供的&#xff0c;需要拼接上申请的 appid登录…

Amino PEG11 COOH,Amino-PEG11-acid,可在活化剂存在下与氨基反应

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;1616426-12-0&#xff0c;Amino-PEG11-acid&#xff0c;Amino PEG11 COOH&#xff0c;H2N-PEG11-CH2CH2COOH&#xff0c;氨基-PEG11-羧酸 一、基本信息 【产品简介】&#xff1a;Amino-PEG11 acid is a heterobifun…

深圳市金航标电子有限公司

深圳市金航标电子有限公司&#xff0c;技术骨干来自清华大学和电子科大&#xff0c;吸纳海归专业人才&#xff0c;可以研制高可靠高性能 天线和连接器产品&#xff0c;在东莞塘厦和广西柳州的生产基地有自动化生产线多条&#xff0c;具有大批量产品的生产交付能力。金 航标电…

探索IP地址定位工具:解读IP数据云的功能与优势

在当今数字化时代&#xff0c;IP地址定位工具成为了许多领域中不可或缺的技术支持&#xff0c;为网络安全、地理定位服务和个性化推荐等提供了重要数据支持。其中&#xff0c;IP数据云作为一种领先的IP地址定位工具&#xff0c;具有一系列功能和优势&#xff0c;本文将对其进行…