vue-cli3 项目中引入iconfont图标

最新推荐文章于 2024-10-07 14:45:56 发布
最新推荐文章于 2024-10-07 14:45:56 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39098810/article/details/115306248
版权
本文介绍了在Vue CLI3项目中引入Iconfont图标的步骤：1) 在Iconfont官网创建项目并添加图标；2) 下载项目文件到本地，并将其放入项目src/assets/icon文件夹；3) 修改iconfont.css文件，使用正确的项目前缀；4) 在项目中通过font class引用图标，轻松实现图标展示。
摘要由CSDN通过智能技术生成

1.https://www.iconfont.cn/在网站中新建一个项目

（新建时前缀最后加上-，icon-map-）

2.将图标加入该项目中

3.选择添加至项目-选中你新建的项目

4.下载至本地

5.解压后

最低0.47元/天 解锁文章
每天吃肉肉
关注
专栏目录
Vue3项目动态引入iconfont（阿里巴巴矢量图标库）
青年码农
12-18 1788
Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具这篇文章主要讲的是在Vue3项目上，动态引用iconfont库。iconfont怎么新建项目，这里就不多说了，我们要用到的就是下方圈出来的。1.定义方法我们定义一个方法，动态通过link引入我们的iconfont文件，...
在vue-cli3项目中使用svg-sprite-loader
草灯的专栏
09-11 1434
目录概览使用svg-sprite-loader好处手把手图文教程：如何引入svg-sprite-loader上iconfont上搜索需要的icon图标，下载svg格式文件，放入到src>icons>svg目录下在main.js页面里面引入icons在页面中使用svg-sprite-loader图标。最终演示效果如下：参考文章icons和SvgIcon目录下载 使用svg-sprite-loader好处 我用vue-cli3.0 + elementUI 搭建项目，但是elementUI的icon组
vue-cli3 使用iconfont字体图标
byking818的博客
04-03 118
将下载下来的压缩包解压到本地。绿色箭头的不需要，只需要红色和黄色方框内的。 找到Vue项目路径，在assets路径下新建文件夹Iconfont，将文件复制粘贴到项目里【命名看个人】 修改main.js: import './assets/Iconfont/css/iconfont.css'(注意路径问题)【自行改为自己的iconfont.css路径】 修改文件路径：这四个文件...
vue3- antd design vue 引入iconfont
最新发布
cui_win的专栏
10-07 777
vue3项目中，加入iconfont图标
vue3项目中使用iconfont图标
黄钢的博客
12-05 3911
写前端项目时，经常要用到iconfont图标，我最原始的方法是吧iconfont图标下载为png/svg文件，然后在文件中作为资源引入，后来发现这么搞太不专业了记录一下相对比较靠谱的使用方法。
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 3476
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！
a1518079148的博客
03-24 611
vue3项目中如何使用iconfont图标？体积太大？看这篇文章就够了！在vue3项目中使用iconfont图标是基于svg内容进行按需使用，通过vite的插件进行按需编译，在项目中无需担心从iconfont项目打包的图标体积太大，用到哪些就只打包哪些，对于全引用的后续考虑将图标文件单独动态引入，因而不影响首屏加载速度。
Vue CLI引入iconfont字体
u010234868的专栏
09-29 434
1. 字体下载 打开iconfont-阿里巴巴矢量图标库 搜索要用的图标，选定后添加入库，从库中添加到项目，然后下载到本地。 2. 将下载到本地的字体文件解压缩后放入vue cli的assets文件夹中，重命名为font。 3. 在main.js中引入 // 引入iconfont字体 import './assets/font/iconfont.css' 4. .vue组件中使用 <i class="iconfont icon-back"></i> 页面：
解决vue-cli项目webpack打包后iconfont文件路径的问题
10-18
在Vue CLI项目中，我们通常会将`iconfont`的CSS样式和字体文件引入到项目中。然而，当使用`webpack`进行打包时，由于文件路径的处理方式，可能会导致打包后的CSS文件引用的字体文件路径错误，从而在生产环境中无法...
vue-cli4.x创建企业级项目的方法步骤
10-15
在图标处理方面，你可以使用 Iconfont，首先下载 Iconfont 文件到 `src/assets` 目录，然后在 `main.js` 中引入 `iconfont.css`： ```javascript import './assets/Iconfont/iconfont.css' ``` 确保你的项目已安装...
vue-cli3项目如何引入iconfont（项目中已有svg-sprite-loader导致一直报错）
m0_37355537的博客
12-16 1820
一、图标下载 登录阿里巴巴iconfont网站将需要用到的图标加入购物车，如下图所示。 选好后点击“添加至项目”，如下图所示。 进入“图标管理”，选择“Font class”（若需修改图标名称，鼠标移入图标点击编辑图片进行修改），下载图标至本地，如下图所示。 二、引入项目中 在项目中的assets目录中新建文件夹“iconfont”，将已下载的图标文件解压到该目录中，如下图所示。 在m...
vue3前端项目引入iconfont阿里图标
bighead的博客
03-22 7847
1.首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中 2. 进入项目以后 选择 Font class 并下载到本地 下载到本地，解压以后的文件夹列表如下： 3. 把红框中的部分 粘贴到 自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。 4.在main.ts文件内全局引入 阿里云字体图标 css,记得使用 路径要正确，如果此时编译不正确，说明 引用路径存在问题 import { createApp } from 'vue' im
vue3使用iconfont
m0_48799309的博客
09-13 710
得到压缩包解压放到项目中，一般都放到assets文件夹下。
Vue3如何引入iconfont
HaushoLin的博客
12-02 3184
本次采用的免费字体图标是iconfont。
Vue3 项目引入阿里 iconfont 图标和字体
热门推荐
weixin_42365757的博客
11-02 1万+
Vue3 项目引入阿里 iconfont 图标和字体
vue3.0 引用 iconfont 图标
票票的博客
08-28 2369
亲测有效
Vue3 项目引入阿里 iconfont 图标和字体的多种方式
共同学习，共同成长
09-19 2710
对比阿里图标库提供的3种图标引用方式：unicode、font-class、symbol。以及在vue3+vite+ts的项目中封装并使用阿里iconfont图标组件，以及如何使用阿里字体图标。
iconfont图标库引入vue3项目及单色多色图标的使用
码农舟舟的博客
08-11 3786
iconfont图标库在vue项目中的使用方法
vue3项目中引入icon font图标使用
weixin_42255789的博客
01-17 1334
vue3项目中引入icon font图标使用
Vue-CLI创建项目详细指南
通过Vue-CLI，开发者能够快速地搭建一个具备基本结构的Vue项目，包括自动配置Webpack、设置热加载、引入各种插件等功能，极大地提高了开发效率。 创建Vue-CLI项目的主要步骤如下： 1. **环境准备**：确保已经安装...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值