vue项目中引入字体图标的所有步骤~(过程截图）

最新推荐文章于 2023-09-10 11:03:26 发布
最新推荐文章于 2023-09-10 11:03:26 发布
阅读量637 收藏
点赞数
分类专栏： 前端vue 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42885734/article/details/116853214
版权
本文详细介绍了如何在Vue项目中引入阿里矢量图标。首先在阿里图标库下载SVG文件，接着在Icomoon网站上传并生成字体图标，设置项目名和类前缀。最后将下载的资源引入项目，更新CSS样式，并在组件中使用。
摘要由CSDN通过智能技术生成

文章目录

一、图标生成

（一）、先在阿里矢量图标库（https://www.iconfont.cn/）下载所需要的svg文件

在这里插入图片描述

（二）、把这些svg文件上传到https://icomoon.io/app/#/select

进入网站后，找到Import Icons按钮，点击进入，把svg文件导入。

在这里插入图片描述

选中想要的字体

在这里插入图片描述

生成图标字体

在这里插入图片描述
点击Preferences

最低0.47元/天 解锁文章
不争青年
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE3项目中引入单色和彩色字体图标解决方案
m0_37873510的博客
05-31 908
vue3项目下引入单色和彩色字体图标的用法
vue中引用阿里字体图标的方法
08-28
引用阿里字体图标在 Vue 项目中是一件非常简单的事情，只需要正确地配置 Webpack 和引入阿里字体图标的 CSS 文件就可以了。如果您在使用阿里字体图标时遇到了错误问题，不要担心，只需要按照我们的步骤来解决问题就...
vue中引入字体图标的方法
南野子
08-23 974
vue中引入字体图标的方法 引入图标后不必再把图片下载下来放到项目中，下面是我自己的操作步骤： 1.在阿里巴巴矢量图标库找好图标后，不点下载，点击购物车，添加至项目 2.若之前未添加过项目则手动新增项目，若添加过直接点击选择对应项目添加； 3.点击下载你至本地并解压 4.在自己项目中新建iconfont文件夹，将解压的文件夹中iconfont.css文件导入 5.在iconfont.css中把字体引入方式改为绝对路径 6.在main.js中引入样式 或在APP.vue中引入 7.需注意，每次新
在vue中引入字体图标库
qq_45674040的博客
01-25 562
1.下载阿里图标库 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^=“iconfont”], [class*=" iconfont"],(这一步是找到包含iconfont 或者以iconfont 开头的类名)同时替换font-family为iconfont(保持一致) 4. main.js引入字体图标(全局,也可局部引入使用) 5. 使用class类名方式使用字体图标即可 参考链接 https://www.cnblogs.c
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
weixin_34314962的博客
04-18 646
　　iconfont字体图标使用就不多说了，大致是几部： 　　1、在iconfont官网选图标，加入购物车，加入项目，下载到本地，解压 　　2、在项目assets目录新建目录iconfont，用于存放刚才下载解压的代码 　　3、在main.js导入iconfont.css文件 import './assets/iconfont/iconfont.css' 　　4、在代码中使用class="ic...
Vue 项目中如何引入 iconfont 字体图标
qq_36437172的博客
05-15 687
1.在Iconfont 官网选择要下载的图标，下载至本地。将下载的内容放在 assets 文件夹下。 2.在 main.js 文件中引入 iconfont.css 的样式 import '@/assets/fonts/iconfont.css'; 3.如何在 vue 中使用呢？ <i class="iconfont icon-zitigui-xianxing"></i> 4.如果报错，需要安装 css-loader 依赖包 npm install css-lo...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
在Vue中使用icon 字体图标的方法
12-02
在Vue项目中，使用图标是常见的需求，字体图标由于其加载速度快、支持多分辨率等优点，成为了一种常用的解决方案。本篇文章将详细介绍如何在Vue中使用阿里Iconfont图标库，以及两种不同的使用方法：在线引入和本地化...
vue element项目引入icon图标的方法
12-07
在Vue Element项目中，我们经常会遇到需要引入图标的需求，尤其是当Element UI提供的图标库无法满足设计需求时。本文将详细讲解如何在项目中引入阿里巴巴图标库（Iconfont）以扩充图标的种类和数量。 首先，我们...
Vue项目中如何引入icon图标
12-12
在Vue项目中引入图标是一项常见的任务，特别是在构建用户界面时，图标可以极大地增强用户体验和界面美观度。本文将详细介绍如何通过icomoon网站下载并引入图标到Vue项目中。 首先，你需要访问icomoon网站...
Vue elementui字体图标显示问题解决方案
10-14
主要介绍了Vue elementui字体图标显示问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue项目中使用字体图标 带详细图解
taoCSD的博客
01-26 140
https://www.cnblogs.com/hahahakc/p/13025069.html
vue3引用Font-Awesome字体图标库
键指江湖的博客
08-03 1352
介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）
基于vue2.x搭建组件库的流程-（四 ）-组件库中引入字体图标
weixin_42349568的博客
10-10 394
组件库中引入字体图标库。
vue项目中使用字体图标（iconfont）
云帆的博客
05-10 2352
前言 element-ui中的字体图标非常好用，那么如何在项目中使用自定义字体图标呢 步骤 进入iconfont官网，登录/注册一个账号； 搜索你想要的图标，并且加入到购物车； 顶部的购物车图标会显示当前库存数量，已入库的图标会显示虚线边框； 点击顶部购物车图标，在点击添加到项目； 如果还没有创建过项目，可以点击“+"按钮新增； 添加到项目后，进入项目详情； 一般选择font class模式，图标下方显示图标的font class名称； 进入项目设置，修改字
vue中 字体图标引入 - iconfont阿里字体图标库
最新发布
weixin_42479421的博客
09-10 487
iconfont字体图标引入，fontclass方法
vue中如何使用字体图标
weixin_44747173的博客
01-18 1321
vue中如何使用字体图标 一、在iconfont中下载字体图标到本地 ①地址：https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a ②找到心仪的图标添加至购物车 ③找到购物车点进去 ④添加到项目 ⑤选择需要添加的项目，如果没有项目那个右上角新建一个 ⑥下载至本地 ⑦将下载的文件解压之后命名为iconfont然后放在assets下 ⑧在main.js中引入iconfont.css ⑨挑选相应图标并获取字体编码，应用于页面
如何使用字体图标 （新手指南）
weixin_33699914的博客
06-02 863
先简单介绍一下什么是字体图标： 字体图标就是一种比较特殊的字体。通过这种字体，显示给用户的就像一个个图片一样，广泛应用于Web项目的开发 ，如下图： 为什么要使用字体 图标 和 使用字体图标的优势： 这是因为图片不能很好地进行缩放，当图片进行放大时会失真（即变模糊）。而且加载每一张图片都需要一次“http请求”，因此也拖慢了整个加载页面的时间。另外，要是没有图片编辑器（软件）的话就很难...
Vue项目中引入字体图标（详细讲解）
weixin_41432139的博客
07-17 3832
Vue项目中引入字体图标（详细讲解）
vue中使用iconfont字体图标，不显示是什么原因
07-08
如果在 Vue 中使用 Iconfont 字体图标时出现不显示的情况，可能有以下几个原因： 1. 字体文件路径不正确：确保你在项目中引入了正确的 Iconfont 字体文件，并且路径设置正确。可以在浏览器的开发者工具中检查网络...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值