vue项目中使用阿里iconfont图标(下载并在本地引用)

原创 已于 2022-05-11 15:24:47 修改 · 2.3k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #iconfont #css #html

于 2021-12-16 11:25:39 首次发布
本文介绍了在Vue项目中如何下载并本地引用阿里Iconfont图标。步骤包括创建icons文件夹，存放所需图标文件，并在main.js中引入iconfont.css。此方法适用于前端开发中的图标管理。

vue项目中使用阿里iconfont图标(下载并在本地引用)

step1

在这里插入图片描述

step2

在这里插入图片描述

step3

在这里插入图片描述

在scr/asstets/css目录下新建icons文件夹，把图中所需要的四个文件放进去即可

记得在main.js引入iconfont.css

import './assets/icons/iconfont.css'
vue3 自动下载使用 iconify图标以及自定义svg图标
xw245184020的专栏
10-11 2263
自定义图标只要下载svg 文件到 assets/icons 文件夹下，自定义图标 通过icon-图标名称访问，iconify图标通过i-图标来源-图标名称访问 i-ep-edit i-ant-design-user。开发中经常使用图标，通过unplugin-icons 插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。vite.config.ts配置。unocss.config.ts配置。
如何在Vue项目中使用阿里巴巴矢量图标库
最新发布
m0_63026408的博客
05-06 1425
首先我们需要找到阿里巴巴矢量库官网。
vue-svg图标.zip
10-17
存储的为svg-icon的部分图标，功后台图标基本使用，不是很全
vue之iconfont图标使用（下载到本地）
seimeii的博客
10-11 694
第一步 下载之后解压 第二步 引入到项目中 在你的项目中引入iconfont.css文件 第三步 使用
Vue中下载iconfont到本地使用
zzzzzzzi111的博客
08-30 1042
Vue中下载iconfont到本地使用
vue3下载阿里巴巴图标到项目使用
m0_73847509的博客
06-07 571
2,在项目的assets静态文件加一个iconfont的文件夹,把压缩包的圈红的文件放到iconfont文件夹。4,在main.js引入下载的iconfont.js且注册组件。3,添加一个叫iconfont的组件,组件内容如图。1,在阿里巴巴下载至本地。5,最后页面直接使用啦。
在vue项目中正确使用iconfont的方法
10-17
在Vue项目中使用Iconfont（字体图标）是一种让网页更加生动和个性化的常见做法。图标字体与传统的图片图标相比，具有轻量级、可随意更换颜色、大小缩放不失真、易于添加动画等优势。下面是详细的步骤和知识点介绍。 ...
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 中使用阿里巴巴黑白图标和彩色图标 在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，...
如何在vue项目中系统的使用iconfont字体图标
m0_50210161的博客
08-20 3008
如何在vue项目中系统的使用iconfont字体图标前言iconfont的特色官网注册在项目中使用的方式 前言 今天聊一下前端iconfont的使用方式，前端的图标经过这些年的发展，变得更系统化了，从最开始，我们使用的img图标，需要一个一个导入，再后来发明雪碧图，所以图标放在一张图上，利用定位进行使用，但是在添加新图标的时候，也会让之前图标的定位改变。维护起来也十分不方便，再到后来兴起fontawesome，用cdn进行引入，直到现在最终投入阿里iconfont的怀抱中。使用它可以方便快捷的管理整个项目的
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
vue-icon-font：Vuejs的IconFont插件
02-04
vue-icon-font 插件 屏幕截图 安装 NPM（推荐） # install dependencies npm install vue-icon-font 手册 # Download `dist/vue-iconfont.js` and include it in your HTML file < script src =" ../dist/vue-iconfont.js " > </ script > Iconfont资产 这是Alimama MUX制作的矢量图标管理与交流平台，设计人员可以在此处上传矢量图标，用户可以通过多种格式下载矢量图标，还可以将这些图标转换为字体以供前端工
css_iconfont
01-06
css_iconfont css_iconfont用法
iconfont.css免费给大家了
03-25
一些文字代码
vue 中 iconfont 下载至本地 使用方法
josiecici的博客
12-03 1462
首先需要一个图标的集合，然后下载到本地 然后将下载的文件移入到项目里面，文件夹里面的东西有这些 最后导入使用 导入的是这个css文件 使用 使用就在这个html内找icon的类名 在项目里面我就用了两个类名 最后效果： ...
Vue项目引入icon图标(阿里巴巴矢量图标库)
weixin_59528719的博客
02-28 1924
当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。
vue引用iconfont两种方式
a5252145的博客
08-17 1619
vue引用iconfont两种方式 引入本地文件。 a. 把iconfont项目下载到本地。 b. 解压出来，放在项目中static（静态文件夹）下。 c. 在main.js中引入iconfont:import '../scripts/iconfont/iconfont.css'; d: 在页面中使用：<i class="iconfont iconicon_jinru"></i>,这里使用Font class格式 引入在线文件 a. 查看项目在线链接。 b. 在global.
vue项目使用iconfont（本地下载、彩色icon）
weixin_41292470的博客
08-13 2300
1.下载至本地 1.下载iconfont文件，包含iconfont.ttf、iconfont.css 2.iconfont.ttf 文件 转base64 3.打开 iconfont.css文件，修改 @font-face 部分，将转换好的 base64代码粘贴到对应位置 @font-face { font-family: "iconfont"; src: url(data:application/font-woff;charset=utf-8;base64,转换的base64内容) form
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 5003
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
vue 引入iconfont字体库
weixin_30337157的博客
04-17 179
1.登录官网 https://www.iconfont.cn/ 2.选择所需要的图标加入图库 新建项目 选择fontClass 并下载到本地 目录如下 3.项目 assets目录下 新建 iconfont 文件夹 并把所有的文件都复制过来(为了以后方便别人查阅) 打开 iconfont.css，添加如下代码: [class^="icon"], [class*=" i...
Vue Element项目引入阿里Iconfont图标的步骤详解
6. **在项目中使用图标**: 现在可以在Vue组件的HTML模板中直接使用这些新引入的图标，通过`[class^="el-icon-ump"]`或`[class*="el-icon-ump"]`选择器引用，确保与Element UI的结构保持一致。 总结： 通过以上步骤...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端大斗师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值