在vue中引入iconfont

最新推荐文章于 2025-06-18 17:09:56 发布
最新推荐文章于 2025-06-18 17:09:56 发布
阅读量404 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 项目遇到的问题 文章标签： vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LRQQHM/article/details/117919921
本文介绍了如何在项目中使用Iconfont，重点讲述了将下载的CSS文件引入到项目全局的方法，包括将文件放入assets目录，以及在main.js中引入iconfont.css。通过这种方式，开发者可以方便地挑选并应用所需的图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

iconfont里面提供了三种方法
个人实践使用第二种方式，只要把css文件引进全局就好了
1.将下载下来的文件放在assets中
在这里插入图片描述

2.将下载下来文件的css例如iconfont.css在main.js中引入
在这里插入图片描述

3.挑选相应图标并获取类名，应用于页面

Vue引入使用iconfont字体图标
m0_51431448的博客
08-08 1033
由于element-ui或element-plus提供的图标有时候并不能满足日常需求，所以这篇介绍一下前端引入阿里巴巴矢量图标库使用，其实不止vue哈，html也是同样的道理。
vue项目中引入iconfont
2401_84152928的博客
05-07 1102
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
vue项目中引入iconfont(1)
2401_84152911的博客
05-07 874
兼容性最好，支持ie6+，及所有现代浏览器。支持按字体的方式去动态调整图标大小，颜色等等。但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。兼容性良好，支持ie8+，及所有现代浏览器。相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。不过因为本质上还是使用的字体，所以多色图标还是不支持的。
Vue项目----iconfont图标的使用
最新发布
weixin_69889539的博客
06-18 1005
最后到此结束。想深入学习iconfont的小伙伴可以仔细专研一下前言中的文章。
jQuery概述，架构师必备技能
2401_84094725的博客
04-04 497
去jquery官网下载jquery代码，在项目中新建jquery.min.js文件，将在jquery官网得道的jquery代码复制到jquery.min.js文件中。代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！2.6、JQuery对象和DOM对象的转换。2.5、JQuery对象和DOM对象。2.4、jQuery的顶级对象。
vue项目引入iconfont图标
eqizhihui的博客
10-07 2751
点击添加至项目，就会出现一个加入项目的操作框，若之前没有新建过项目的（或者需要放到其他项目但是又没有新建的情况下），可以点击右边的新建按钮新建，若有项目的情况下，可以直接点击该项目，点击确定即可。2.若是在资源管理->我的项目->新建项目中新建，则需要填写一下信息，基本都有默认值，直接新建的情况下就是处理项目名意外就是默认值，而此处新建则可以自定义。步骤四：项目引入，首先点击下载至本地将项目压缩包下载到本地中，解压缩文件至你自己的代码项目中，此处我放到了assets目录下，其子目录可自定义。
vue项目使用iconfont的最佳实践
08-12
将下载的`iconfont.css`文件放入Vue项目的`public/css`目录下，然后在`index.html`或全局`main.js`中引入： ```html <link rel="stylesheet" href="/css/iconfont.css"> ``` 或者在`main.js`中： ```...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
vue项目引入iconfont
ex_xyz的博客
05-24 988
vue项目引入iconfont，以在线的方式
如何在Vue中引入iconfont
weixin_46285310的博客
08-06 4363
首先在了解了Vue的基础上，知道和一般的html代码里引入的方式会有所不同，那么如何引入呢 第一步：首先在某图标库里搜索你想要的图标 第二步：点击图标添加到购物车里如下图所示 第三步：点击右上角购物车，会出现一个列表我们这里选择添加到项目，如果没有，则再右下角新增一个项目 第四步：点击之后会跳转到项目里如图，这里我们选择Font class 如有特殊需要，点击项目设置，设置一些选项，这里有一个前缀可以设置，避免与你的vue项目里的css或者命名参生冲突 第五步：...
Vue中引入iconfont
记录生活点滴
05-11 303
Vue中引入iconfont获取iconfont样式文件导入iconfont样式文件引入iconfont.css使用iconfont效果展示 获取iconfont样式文件 具体步骤，可以参考我的另一篇博文获取iconfont样式文件 导入iconfont样式文件 在Vue项目中asset文件夹下创建iconfont文件夹将iconfont样式文件复制进来 引入iconfont.css 在Vue项目中的main.js中全局引入iconfont.css 使用iconfont <i class="ic
vue 引入iconfont
chpswg的专栏
07-05 242
1、在阿里的iconfont 页面注册账号，新建项目，添加感兴趣的图标到自己新建的项目，修改图标的类名，下载项目到本地，解压 2、在asset下的lib目录下新建iconfont目录，将步骤1中的文件拷贝到这个目录 3、修改iconfont.css文件，修改引用文件的目录结构 4、在页面的入口文件中添加引用 import './assets/lib/iconfont/iconfon...
vue引入iconfont的优雅实践
brokenkay的博客
06-06 1982
前言 本文撰写的初衷是为了向组内成员推行使用svg sprites的方式管理项目的图标,由于实际工作中很多项目仍然采用font class的方式,这样不自觉带来一个痛点. 当项目一期开发完毕后,过段时间进入到项目二期。新增的开发需求不可避免的会增加新的图标,而font class需要全量打包图标的字体文件. 哪怕新需求只添加了一个图标,而前端同学却要将旧图标和新图标融合后重新打包生成一次字体文件,这样的结果让人无法接受. svg sprites能完美的解决这一问题.整体思路是先将项目中每一个图标都生成一个s
梳理详细 vue中引入第三方字体图标库iconfont
feiyu_may的博客
04-25 2495
最近在项目中需要使用第三方图标库，我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候，发现很多教程写的比较模糊，一些博主只是提供一种可实现的方式，但是并没有完全区分iconfont的几种引入方式及对应文件的作用，我一开始是有点混淆的，所以自己做了实践总结。 目录 1、在Iconfont网页上建立自己的项目 2、选择图标加入购物车 3、Vue工程中引入iconfon...
vue 引进并使用 iconfont
态度决定一切
06-05 986
引入iconfont前，保证vue项目能正常运行，这里讲述开发环境引进和上线部署环境引进 一、开发环境 （由于开发环境修改频繁，建议采用font-class，这种方式相对方便，每次增减图片，只需替换链接即可） 1.复制链接 2.在vue项目下，index.html引进 <link rel="stylesheet" href="http://at.alicdn....
vue2引入iconfont
09-05
要在Vue2中引入iconfont，可以按照以下步骤进行操作： 1. 首先，在iconfont官网上选择需要的图标，并将其加入购物车。 2. 在购物车中，选择“symbol”作为图标引入方式，并勾选“下载到本地”选项。 3. 解压下载的文件，将其中的iconfont.css和iconfont.js文件复制到Vue项目的静态资源文件夹（如public目录）下。 4. 在index.html（或者其他主页面）中，通过link标签引入iconfont.css样式文件： ```html <link rel="stylesheet" href="./static/iconfont.css"> ``` 5. 在Vue组件中，可以使用以下方式引入iconfont图标： ```html <i class="iconfont icon-图标名称"></i> ``` 其中，icon-图标名称表示你在购物车中选择的图标的类名。 这样就可以成功在Vue2中引入iconfont图标了。记得在使用图标之前确保已经启动了开发服务器或者重新构建了项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值