Vue引入阿里iconfont图标

已于 2024-01-19 20:58:03 修改
阅读量597 收藏 7
点赞数 9
文章标签： vue.js 前端 css
于 2024-01-19 20:49:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61783008/article/details/135706650
版权
本文详细描述了如何在Vue项目中操作Iconfont图标，包括从库中添加到本地，引入CSS，以及在模板中展示的过程。
摘要由CSDN通过智能技术生成

1.添加需要图标

将需要的图标添加入库，然后再添加到项目内。

2.下载图标到本地

选择 Font class  再点击下载本地。

3.放入vue中

将下载下来的项目解压后放入vue内的assets/icon中

4.在main.js中引入图标

引入iconfont.css即可

// 引入图标
import "@/assets/icon/iconfont.css"
const app = createApp(App)

5.使用图标

<template>
  <i class="iconfont icon-icon"></i>
  <RouterView />
</template>

Shuailing_
关注
  • 9
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目引入iconfont图标
eqizhihui的博客
10-07 2209
点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。
vue 引入iconfont自定义图标
chpswg的专栏
07-05 2551
1、在阿里的iconfont 页面(https://www.iconfont.cn)注册账号，新建项目，添加感兴趣的图标到自己新建的项目，修改图标的类名，下载项目到本地，解压 2、在asset下的lib目录下新建iconfont目录，将步骤1中的文件拷贝到这个目录 3、修改iconfont.css文件，修改引用文件的目录结构,主要是添加头部及修改默认的iconfont类的样式（下次下载...
vue引用阿里彩色图标（symbol引用）
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 5039
引用阿里图标库的方式有三种，前两种都只能引入单色的图标，对于强迫症简直了，所以俺参考其他大佬的博客，学习了如何通过symbol引用彩色的图标 第一步：在阿里图标库选择好自己要的图标，加入购物车，添加至项目，下载到本地 这样就把样式文件下载到本地了 第二步：在vue项目里面创建对应的inconfont文件夹 将这些下载的样式文件放到新建的文件里，方便项目中引用 第三步：在main.js中，引入这几个文件（前两个是阿里图标文件，最后一个可以不要，只是自己设置的基础图标宽高等），目的是为了让全...
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
vue项目中引入iconfont
最新发布
2401_84152928的博客
05-07 927
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
【Vue】在项目中使用阿里图标库
qq_45677671的博客
02-01 1656
在 vue 项目中使用阿里图标库，包括 element-ui 和 ant-design-vue 组件库用法
vue项目引入阿里巴巴矢量图标库图标及其使用教程
记录一名在读研究生的学习笔记、感悟、开发产物
02-21 2060
快速了解阿里巴巴矢量图标库如何引入到vue项目中，并进行使用
vue中使用iconfont图标库
weixin_44635214的博客
07-09 443
阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用 创建SvgIcon组件 <template> <svg class="svg-icon" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </template> <script> export def
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
Vue使用阿里图标库
12-16
在Vue项目的`main.js`文件中引入阿里图标库的JavaScript和CSS链接。将之前生成的在线链接替换到以下代码中的`YOUR_ICONFONT_URL`： ```javascript import '@iconify/iconify'; // 引入阿里图标库的CSS document....
vue element项目引入icon图标的方法
08-27
Vue Element 项目引入 Icon 图标的方法 本文主要介绍了在 Vue Element 项目中引入 Icon 图标的方法，旨在帮助开发者快速和高效地引入 Icon 图标，以提高用户体验和降低页面加载速度。 引入 Icon 图标的必要性 在 ...
vue中引用阿里字体图标的方法
11-29
想在vue中引用阿里的iconfont,却出现报错 ，原因是没有对应的loader处理字体文件。 解决办法 1.引入css文件 import 'font-awesome/css/font-awesome.min.css' 2.在webpack.config中配置 { test: /\.(eot|svg|ttf|...
Vue中使用iconfont-阿里巴巴矢量图标库
Herman _java开发
04-28 366
阿里巴巴矢量图标库（Iconfont）是一个由阿里巴巴提供的矢量图标库，包含了大量的矢量图标，可以供设计师和开发者在线浏览和下载使用。这个库的图标都是由用户上传和分享的，因此种类非常丰富，几乎涵盖了所有可能需要的图标类型。
vue开发一、在Vue中引入ElementUI二、在Vue中使用阿里图标库
小墨蛇的博客
11-22 2579
一、在Vue中引入ElementUI 1. 安装ElementUI 2. 引入ElementUI 3. 使用ElementUI组件 二、在Vue中使用阿里图标库 1. 在阿里图标库中选择图标 2. 下载图标 3. 引入图标 4. 使用图标 总结
Vue项目中使用阿里巴巴矢量图标库（IconFont)
qq_41765777的博客
11-29 718
1、搜索图标 2、加入购物车 3、添加到项目 4、生成在线css文件 5、在项目中引入在线css文件 <style> @import "https://at.alicdn.com/t/font_2835759_vy9n9k1f7o9.css"; </style> 6、使用 <i calss="iconfont icon-home"></i> <span class="iconfont icon-home></spna
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 2521
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
vue 引入 icon(阿里图标库)
qq_28586135的博客
11-10 2006
vue 引入 icon(阿里图标库)
【Vue】前端项目引入阿里图标
m0_61049675的博客
01-30 601
注意：iconfont是固定的，icon-sousuokuang为图片红框部分。
Vue 中 iconfont 使用
大灰狼的小绵羊哥哥的博客
10-16 7581
Vue 中 iconfont 使用
vue引入iconfont
09-06
在Vue项目中引入iconfont有以下几个步骤： 1. 在iconfont官网（如阿里巴巴矢量图标库）上选择需要的图标，...这样就可以在Vue项目中成功引入并使用iconfont图标了。请注意替换`icon-home`为你自己需要的具体图标类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值