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

已于 2022-05-11 15:24:47 修改
阅读量2.1k 收藏 5
点赞数 1
分类专栏： web前端 vue JavaScript 文章标签： vue.js 前端 iconfont css html
于 2021-12-16 11:25:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Web_chicken/article/details/121970729
版权
web前端 同时被 3 个专栏收录
78 篇文章 12 订阅
订阅专栏
JavaScript
63 篇文章 4 订阅
订阅专栏
vue
28 篇文章 0 订阅
订阅专栏

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

step1

在这里插入图片描述

step2

在这里插入图片描述

step3

在这里插入图片描述

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

记得在main.js引入iconfont.css

import './assets/icons/iconfont.css'
前端大斗师
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
iconfont.css免费给大家了
03-25
一些文字代码
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 中使用阿里巴巴黑白图标和彩色图标 在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，...
iconfont字体图标下载及使用方法
qq_42724424的博客
02-12 8191
一、下载方法 1.打开阿里iconfont，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 2.选择font class，点击下载至本地 3下载后的文件应包括以下几项 4.将打钩的文件保存至一个文件夹中，注意，这里如果缺少文件，需要从“项目中”的项目设置修改设置 二、使用方法 1.将iconfont放入css文件夹中，将其余文件放入一个文件夹中，注意，iconfont.css文件夹中的路径要与其余文件的路径对应：如下图： 2.在引入字体图标的时候，需加两个类名，一个是默认的ic
CSS 字体图标下载与引用
YFxiaogui的博客
08-16 596
iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。打开icomoon字库官网，点击右上角IcoMoon APP 按钮。iconfont-阿里巴巴矢量图标库。
vue3下载阿里巴巴图标到项目使用
最新发布
m0_73847509的博客
06-07 358
2,在项目的assets静态文件加一个iconfont的文件夹,把压缩包的圈红的文件放到iconfont文件夹。4,在main.js引入下载的iconfont.js且注册组件。3,添加一个叫iconfont的组件,组件内容如图。1,在阿里巴巴下载至本地。5,最后页面直接使用啦。
vue3 自动下载使用 iconify图标以及自定义svg图标
xw245184020的专栏
10-11 1427
自定义图标只要下载svg 文件到 assets/icons 文件夹下，自定义图标 通过icon-图标名称访问，iconify图标通过i-图标来源-图标名称访问 i-ep-edit i-ant-design-user。开发中经常使用图标，通过unplugin-icons 插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。vite.config.ts配置。unocss.config.ts配置。
Vue3如何引入iconfont
HaushoLin的博客
12-02 2696
本次采用的免费字体图标是iconfont。
在vue项目中引入阿里图标库小记
weixin_30254435的博客
08-10 210
使用Vue技术栈开发不仅效率高，而且很友好，而且还有很多基于vue的UI框架，例如：element等，但是这类框架美中不足的是，图标太少。为了解决这个问题，不得不引入第三方字体库，今天以阿里图标库为例，如何在vue中使用。 1、首先找到合适图标，然后点击添加入库，接着点击右上角的购物车图标。 2、你刚才选择的图标就能在侧边栏看到了，选择要加入的项目（提前建好的项目），点击确定。 ...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|...
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制作的矢量图标管理与交流平台，设计人员可以在此处上传矢量图标，用户可以通过多种格式下载矢量图标，还可以将这些图标转换为字体以供前端工
IconFont汇总
08-10
Icon Font汇总
iconfont小图标从下载到引入到vue项目中的详细教程
YY的博客
12-02 1947
iconfont小图标从下载到引入到vue项目中的详细教程
阿里巴巴矢量图标的下载以及在vue项目中引入使用
ZhengDaHui360的博客
12-23 3927
阿里巴巴字体图标的下载，以及字体图标在vue项目中的使用步骤（详细）
iconfont下载到本地使用教程
q1054007919的博客
07-13 2490
iconfont下载到本地使用教程
【css】iconfont 在线链接怎么用
z767327552的专栏
04-09 2736
font-class引用font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。与unicode使用方式相比，具有如下特点：兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因...
将阿里图标iconfont转成css代码显示
吃瓜群众的博客
01-15 1万+
在做网站的过程中难免会使用到各种小图标，现在总结一个使用阿里图标转成css的方法。 1、打开https://www.iconfont.cn网站，先登录账号，将自己需要的图标选择添加入库。 2、在选择好自己所需要的图标后，点击下载代码 3、新建一个txt文件，点重命名为demo.css。然后打开刚才下载的压缩包找到iconfont.css这个文件从.iconfont这里开始一直复制到最后。 4...
在Vue中使用icon 字体图标
热门推荐
double徐
06-19 2万+
1、使用线上的阿里iconfont图标库 1.打开 iconFont官网 选择自己喜欢的图标，并且添加购物车 2.点击购物车，添加至项目 3 生成链接 4在我们的vue项目中，找到index.html文件，引入css样式，记住这里要放上你的链接地址 5接下来我们就可以在任何组件地方使用我们的图标了,我这里就是用上面生成的三个图标其中的一个。 2、但是考虑网络及用户体验 阿里iconfont下...
iconfont图标如何在vue中使用
04-01
3. 在vue组件中使用iconfont图标 在vue组件中使用iconfont图标需要先在html中创建一个标签，然后将需要使用的图标类名赋值给该标签的class属性。 例如，我们需要使用阿里巴巴矢量图标库中的“搜索”图标，其类名为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端大斗师

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

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

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

打赏作者

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

抵扣说明：

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

余额充值