vue项目之第三方字体图标库

最新推荐文章于 2024-04-08 17:24:23 发布
最新推荐文章于 2024-04-08 17:24:23 发布
阅读量308 收藏
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44666644/article/details/106131769
版权
  1. 下载好之后，将字体图标文件fonts,放在assets文件夹里面 assets/fonts
  2. 在main.js导入
// 导入字体图标
import './assets/fonts/iconfont.css'
  1. 使用字体图标，例如：
<el-input prefix-icon="iconfont icon-user"></el-input>       用户头像
<el-input prefix-icon="iconfont icon-3702mima"></el-input>   用户密码锁
落花流雨
关注
Vue项目中引用‘阿里巴巴字体图标库iconfont’
m0_61043185的博客
04-02 834
我一直觉得技术面试不是考试，考前背背题，发给你一张考卷，答完交卷等通知。首先，技术面试是一个 认识自己 的过程，知道自己和外面世界的差距。更重要的是，技术面试是一个双向了解的过程，要让对方发现你的闪光点，同时也要 试图去找到对方的闪光点，因为他以后可能就是你的同事或者领导，所以，面试官问你有什么问题的时候，不要说没有了，要去试图了解他的工作内容、了解这个团队的氛围。找工作无非就是看三点：和什么人、做什么事、给多少钱，要给这三者在自己的心里划分一个比例。
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 5976
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
vue项目中引入字体图标库（傻瓜式教程，详解）
逆水行舟 不进则退
04-02 4907
在vue项目中使用字体图标库，完整版详细步骤
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 3071
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
梳理详细 vue中引入第三方字体图标库iconfont
feiyu_may的博客
04-25 2339
最近在项目中需要使用第三方图标库，我选择了阿里的iconfont。记录下学习过程。在网上查阅资料的时候，发现很多教程写的比较模糊，一些博主只是提供一种可实现的方式，但是并没有完全区分iconfont的几种引入方式及对应文件的作用，我一开始是有点混淆的，所以自己做了实践总结。 目录 1、在Iconfont网页上建立自己的项目 2、选择图标加入购物车 3、Vue工程中引入iconfon...
Vue添加第三方iconfont图标库
qq_40664253的博客
07-23 493
引入的阿里图标库，地址：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2， 引入步骤如下： 1.登录，点击进入“我的项目”，建立“项目” 2.选择一些自己要用到的图标添加到“购物车”，选择完毕后，添加至项目 3.再次进入“我的项目”，点击“下载至本地” 4.项目引用，下载成功后将解压文件中iconfont前缀的文件...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在Vue.js项目中集成ElementUI和第三方图标库iconfont的示例主要涉及几个关键步骤。首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括...
Vue 第三方字体图标引入 Font Awesome的方法
12-10
总的来说，Vue项目中引入Font Awesome图标库可以极大地丰富你的应用界面，提供便捷的图标使用方式。通过合理配置和优化，可以确保图标加载速度快且不影响用户体验。在实际开发中，还可以根据需求结合其他图标库，如...
Vue项目Element-UI中使用阿里字体图标库
Liang_Shun的博客
06-17 854
第一步：下载字体图标 选择好要下载的字体图标后 点击下载代码，得到一个压缩包 第二步 解压后将文件夹放到项目src/assets中 第三步 打开解压后的文件夹中的demo——index.html 可选fontclass引用 在项目入口文件main.js中导入字体图标 iconfont.css // 导入字体图标 import './assets/fonts/iconfont.css' 最...
在vue中引入字体图标库
qq_45674040的博客
01-25 566
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引入字体图标库
weixin_30606461的博客
02-27 134
1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class*=" iconfont"],同时替换font-family为iconfont(保持一致) 4. main.js引入字体图标(全局,也可局部引入使用) 5. 使用class类名方式使用字...
在vue项目中使用第三方的字体图标库
刘慧丽的博客
11-26 1208
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1、打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 2、选择自己需要的字体图标，下面做演示 ...
vue中 字体图标引入 - iconfont阿里字体图标库
weixin_42479421的博客
09-10 527
iconfont字体图标引入，fontclass方法
vue项目中使用字体图标（iconfont）
云帆的博客
05-10 2420
前言 element-ui中的字体图标非常好用，那么如何在项目中使用自定义字体图标呢 步骤 进入iconfont官网，登录/注册一个账号； 搜索你想要的图标，并且加入到购物车； 顶部的购物车图标会显示当前库存数量，已入库的图标会显示虚线边框； 点击顶部购物车图标，在点击添加到项目； 如果还没有创建过项目，可以点击“+"按钮新增； 添加到项目后，进入项目详情； 一般选择font class模式，图标下方显示图标的font class名称； 进入项目设置，修改字
vue之图标字体制作
weixin_39093202的博客
12-18 467
用svg格式的图片来制作图标字体，来引用一些小的颜色单一的图片，好处是图片缩放不会失真。 工具：www.icomoon.io 操作步骤：将svg图标导入网站，并生成图标字体，然后导出，将里面的fonts文件和style.css文件拿到项目里即可。
vue项目中使用iconfont字体图标(阿里巴巴图标库)
qq_38969618的博客
02-24 708
"图标管理"→“我的项目”→新建项目（第一次使用需创建项目）→“图标库”→“官方图标库”→查询关键字→将所需的图标点击“添加入库”→左上角选择购物车图标→“添加至项目”→在我的项目中，“下载至本地”→解压文件夹，可命名为fonts,放在src的assets目录下，在main.js中引入iconfont.css文件，在.vue中给某元素添加类名class="iconfont",元素内容可直接复制网...
vue3引用Font-Awesome字体图标库
键指江湖的博客
08-03 1453
介绍：这里安装引用的是Font-Awesome 6.x 版本，有专业版（付费），这里只介绍免费版字体使用方法。效果：此时看到同一个图标copy两种引用方式常规和实体的区别了吧。环境：vue3+ts+vite+element plus。4.使用 （看步骤3里面引用图标处）
Vue3中使用各类字体图标：本地SVG、Iconfont、FontAwesome、ElementPlus
最新发布
JackChan
04-08 341
Vue3中使用各类字体图标：本地SVG、Iconfont、FontAwesome、ElementPlus
vue-导入字体图标库
ZC97
01-19 127
elementui第三方字体图标
09-04
elementUI 是一个基于 Vue.js 的桌面端组件库，提供了一套丰富的 UI 组件，方便开发者快速搭建界面。在 elementUI 中，使用了第三方字体图标来增加组件的美观性和可定制性。 elementUI 使用的第三方字体图标库是阿里巴巴的矢量图标库 iconfont。使用 iconfont 字体图标可以避免图片加载，减小了页面的加载压力，并且可以通过 CSS 的方式来自由调整字体的颜色、大小、旋转等样式，使得图标的使用更加方便灵活。 在 elementUI 中，我们可以通过以下步骤来使用第三方字体图标： 1. 在阿里巴巴矢量图标库（iconfont）中搜索需要的图标，并添加至购物车。 2. 在购物车中将选中的图标添加至项目，并进行下载。 3. 下载后解压得到的文件中，找到包含字体文件和 CSS 文件的目录。 4. 将 CSS 文件中的引用路径修改为项目中正确的路径。 5. 在项目的入口文件（如 main.js）中引入 CSS 文件： ```javascript import 'path/to/iconfont.css'; ``` 6. 在需要使用图标的组件中，使用 `<el-icon>` 标签，并通过 `icon-class` 属性来指定图标的类名： ```vue <template> <div> <el-icon icon-class="iconfont icon-xxx"></el-icon> </div> </template> ``` 其中，`icon-xxx` 为图标的类名，可以在下载的 CSS 文件中找到对应类名。 通过上述步骤，我们可以很方便地在 elementUI 中使用第三方字体图标，并根据需要进行自定义样式的调整。同时，elementUI 也提供了一些默认的内置图标，供开发者直接使用，方便快捷。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

落花流雨

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

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

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

打赏作者

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

抵扣说明：

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

余额充值