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

已于 2022-05-11 15:24:47 修改
阅读量2.1k 收藏 5
点赞数 1
分类专栏： web前端 vue JavaScript 文章标签： Vue Iconfont 本地引用 CSS 前端开发
于 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
    评论
专栏目录
vue前台错误
lyu12345的博客
10-17 797
TypeError: Cannot read property ‘validate’ of undefined 错误 TypeError: Cannot read property ‘validate’ of undefined <el-button type=“primary” @click=“addStock”>新增 method...
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
在 Vue 中使用阿里巴巴黑白图标和彩色图标 在 Vue 项目中，使用阿里巴巴黑白图标和彩色图标可以为我们的应用程序添加视觉吸引力和丰富的用户体验。阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，...
iconfont字体图标下载及使用方法
qq_42724424的博客
02-12 8218
一、下载方法 1.打开阿里iconfont，将所要下载的图标依次添加至购物车，然后点击右上角的购物车，点击添加至项目 2.选择font class，点击下载至本地 3下载后的文件应包括以下几项 4.将打钩的文件保存至一个文件夹中，注意，这里如果缺少文件，需要从“项目中”的项目设置修改设置 二、使用方法 1.将iconfont放入css文件夹中，将其余文件放入一个文件夹中，注意，iconfont.css文件夹中的路径要与其余文件的路径对应：如下图： 2.在引入字体图标的时候，需加两个类名，一个是默认的ic
iconfont.css免费给大家了
03-25
一些文字代码
vue项目中引入iconfont
最新发布
2401_84097820的博客
05-15 787
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
CSS 字体图标下载与引用
YFxiaogui的博客
08-16 641
iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。打开icomoon字库官网，点击右上角IcoMoon APP 按钮。iconfont-阿里巴巴矢量图标库。
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
qq_46103732的博客
11-24 4333
vue项目使用阿里巴巴矢量图标库详细教程（symbol方式下载到本地）
vue之iconfont图标使用（下载到本地）
seimeii的博客
10-11 604
第一步 下载之后解压 第二步 引入到项目中 在你的项目中引入iconfont.css文件 第三步 使用
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|...
vue3 自动下载使用 iconify图标以及自定义svg图标
xw245184020的专栏
10-11 1467
自定义图标只要下载svg 文件到 assets/icons 文件夹下，自定义图标 通过icon-图标名称访问，iconify图标通过i-图标来源-图标名称访问 i-ep-edit i-ant-design-user。开发中经常使用图标，通过unplugin-icons 插件我们可以在项目中自动下载所需的图标，但实际开发中我们还需要iconfont以及项目ui切图中的图标，这就需要使用自定义SvgIcon组件。vite.config.ts配置。unocss.config.ts配置。
字体图标的下载及使用
qq_46034942的博客
02-10 1043
字体图标的下载及使用
Vue中下载iconfont到本地使用
zzzzzzzi111的博客
08-30 663
Vue中下载iconfont到本地使用
iconfont字体图标下载
m0_54088431的博客
07-24 1501
把鼠标放在图标上面，就会显示购物车，点击加入购物车即可此时就会有一个压缩包下载了，解压到当前文件夹，可以将文件名个名字这里面点击FontClass就可以使用图标的类名了（下面那一行）同时这个页面也有使用步骤。一定是，否则会显示不了iconfont.css。...
vue中实现点击下载图片
xiaokangna的博客
04-27 5334
以上代码通过fetch获取图片并转化为blob类型，然后利用URL.createObjectURL创建下载链接，通过创建的< a >标签的 click() 方法来实现下载，最后移除新建的 < a > 标签和已经使用过的 URL 对象。Vue中实现点击下载图片的方法可以使用HTML5中的< a >标签的 download 属性或者通过JS来实现。
Vue3如何引入iconfont
HaushoLin的博客
12-02 2746
本次采用的免费字体图标是iconfont。
Vue 支持下载 svg 图片
从器之道 从一而终
04-29 1081
Vue-element-admin 的图标库，在本项目里面非常方便使用，但是其他项目也需要这个图标时，下载就非常麻烦， 需要翻代码。为了解决这个问题， 我在分析了svg的代码之后，实现了svg图片的在线下载。其主要思路就是将 SVG 内容转换为 image/svg+xml 格式，并将其放置在一个带有下载属性的 a 标签上，从而实现点击下载。
vue导入图标的3种方式【阿里图标】
热门推荐
weixin_41027083的博客
03-22 1万+
第一种方式 Font class- css 点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。 @font-face { font-family: "iconfont"; /* Project id 3262995 */ src: url('iconfont.woff2?t=1647910536684') format('woff2'), url('iconfont.woff?t=1
iconfont图标如何在vue中使用
04-01
1. 安装iconfont图标库 首先需要在iconfont官网下载需要使用的图标库，并将其导入到项目中。这里以阿里巴巴矢量图标库为例，下载完成后会得到一个名为“iconfont”的文件夹，将其复制到项目的public目录下。 2. 在main.js中引入iconfont图标库 在main.js中，我们需要引入iconfont图标库并将其挂载到Vue实例中。具体代码如下： ``` import Vue from 'vue'; import App from './App.vue'; import './public/iconfont/iconfont.css'; // 引入iconfont图标库 Vue.config.productionTip = false; new Vue({ render: h => h(App), }).$mount('#app'); ``` 3. 在vue组件中使用iconfont图标 在vue组件中使用iconfont图标需要先在html中创建一个标签，然后将需要使用的图标类名赋值给该标签的class属性。 例如，我们需要使用阿里巴巴矢量图标库中的“搜索”图标，其类名为“icon-search”，则在vue组件中使用该图标的代码如下： ``` <template> <div> <i class="iconfont icon-search"></i> </div> </template> ``` 注意，由于使用了iconfont图标库，需要将该标签设置为“i”标签。同时，需要将图标的类名添加到“class”属性中。 4. 样式调整 使用iconfont图标时，可以通过修改css样式来调整图标的大小、颜色、旋转等。 例如，要将搜索图标的大小调整为30px，颜色调整为红色，代码如下： ``` <template> <div> <i class="iconfont icon-search" style="font-size: 30px; color: red;"></i> </div> </template> ``` 通过在标签内部添加style属性，可以直接对图标进行样式调整。 以上就是在vue中使用iconfont图标的方法。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

前端大斗师

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

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

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

打赏作者

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

抵扣说明：

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

余额充值