Vue项目中引用‘阿里巴巴字体图标库iconfont’

最新推荐文章于 2024-07-13 10:40:17 发布
最新推荐文章于 2024-07-13 10:40:17 发布
阅读量809 收藏 21
点赞数 9
分类专栏： 2024年程序员学习 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61043185/article/details/137254042
版权
本文介绍了如何在Vue项目中使用阿里巴巴字体图标库Iconfont，包括注册登录、创建项目、添加图标到项目及将图标应用到Vue项目中的详细步骤，强调了SVG格式图标的优势和统一管理的重要性。
摘要由CSDN通过智能技术生成

我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标

在这里插入图片描述

在这里插入图片描述

上面的两个ui框架中都提供了很多图标我们至于要直接运用即可，但是在我们的开发需求中很多图标是不包含在这其中的，很难找到一样甚至相近的都很少，当然不包括那些按照ui库进行设计的ui设计师，下面为大家介绍一款强大的图标库 阿里巴巴字体图标库iconfont

在这里插入图片描述

点击进入官网

2.登录或者注册

点击右上角角的头像

在这里插入图片描述

随

最低0.47元/天 解锁文章
程序员狂喜
关注
  • 9
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue项目中引用‘阿里巴巴字体图标库iconfont’(1)
m0_61043185的博客
04-02 610
分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**
vue中 字体图标引入 - iconfont阿里字体图标库
weixin_42479421的博客
09-10 504
iconfont字体图标引入，fontclass方法
vue项目引入字体图标iconfont
i_am_a_div的博客
09-10 1188
一、登入阿里字体图标库 选择图标加入购物车 下载代码： 解压后，将除了html的文件都复制一份到自己项目assets下： 二、点击打开之前解压的html文件 推荐使用第二张种方案Font class引入字体图标： 三、main.sj下引入字体图标样式： 四、按照html的方法使用： 通过类名修改字体图标的大小和颜色 ...
如何在 Vue 项目中优雅地使用图标
最新发布
代码怪兽的技术博客
07-13 824
如何在 Vue 项目中方便易用、自动剪枝、可自定义地使用各种图标库（Material Symbols/ Material Icons），本文提供了一个实用流程。
VUE引入字体图标库
weixin_30606461的博客
02-27 132
1. 下载阿里图标 2. 解压文件,并复制文件到VUE项目内 3. 找到添加的字体图标的.css文件,将.iconfont改成[class^="iconfont"], [class*=" iconfont"],同时替换font-family为iconfont(保持一致) 4. main.js引入字体图标(全局,也可局部引入使用) 5. 使用class类名方式使用字...
vue项目中引入字体图标库（傻瓜式教程，详解）
逆水行舟 不进则退
04-02 4882
在vue项目中使用字体图标库，完整版详细步骤
vue项目之第三方字体图标库
无知者无畏
05-14 306
下载好之后，将字体图标文件fonts,放在assets文件夹里面 assets/fonts 在main.js导入 // 导入字体图标 import './assets/fonts/iconfont.css' 使用字体图标，例如： <el-input prefix-icon="iconfont icon-user"></el-input> 用户头像 <el-input prefix-icon="iconfont icon-3702mima"&gt..
在vue项目中使用第三方的字体图标库
刘慧丽的博客
11-26 1191
如何在vue项目中使用第三方的字体图标库 以在vue项目中导入阿里字体图标库为例 1、打开阿里字体图标库的官方网址 https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a 2、选择自己需要的字体图标，下面做演示 ...
vue项目中使用iconfont字体图标(阿里巴巴图标库)
qq_38969618的博客
02-24 701
"图标管理"→“我的项目”→新建项目（第一次使用需创建项目）→“图标库”→“官方图标库”→查询关键字→将所需的图标点击“添加入库”→左上角选择购物车图标→“添加至项目”→在我的项目中，“下载至本地”→解压文件夹，可命名为fonts,放在src的assets目录下，在main.js中引入iconfont.css文件，在.vue中给某元素添加类名class="iconfont",元素内容可直接复制网...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在Vue.js项目中集成ElementUI和第三方图标库iconfont的示例主要涉及几个关键步骤。首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括...
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
vue 引入 阿里巴巴矢量图标库iconfont
pamerely的博客
08-31 1418
vue 引入iconfont前言选择字体图标把购物车里的字体图标加入项目中下载在vue项目中引入项目中用法 前言 开发过程中总会遇到需要一些字体图标，这里就要提一下阿里巴巴矢量图标库了，这里有很多免费的字体图标，可以下载，在项目中引用。 选择字体图标 打开阿里巴巴矢量图标库官网：https://www.iconfont.cn/ 在官网里面选择自己想要的字体图标 把想要的图标，加入购物车里面，右上角可以看到购物车里面的图标。 把购物车里的字体图标加入项目中 选择好字体图标后，把购物车里的字体图标加入项目中。
Vue3巧用iconfont字体图标库（建议收藏）
爱勇宝
02-05 2815
最近在开发项目中研究了一下阿里妈妈出品的阿里iconfont矢量图标库。看完之后只想说一句，妈妈再也不用担心我的网站找不到图标啦~
Vue--引入字体图标的方式
eiai007的博客
09-17 2360
vue引入字体图标
vue项目引入阿里巴巴矢量图标库 “字体图标” 手把手步骤详解(pc端、移动端都通用)
m0_49714202的博客
12-11 859
第一步打开百度搜索阿里巴巴矢量图标库 官方网址:https://www.iconfont.cn/ 然后按图片顺序进行操作就能得到想要展示的字体图标 1. 2. 3. 4. 5. 6. 在main点js中引入(路径要找到解压文件下的iconfont.css文件) 7. 8. 9. 在代码中加上上面图标的类名就可以出来所下载的图标了 注意:所有的类名前面都需要加上iconfont后面拼上你需要icon的类名就ok了 <div class="iconfont icon-xxx">&l
vue3同时引入多个iconfont图标库
qq_23858785的博客
10-17 1153
vue3同时引入多个iconfont图标库
在Vue中引入字体图标
二七二十七的博客
03-28 482
本文使用的阿里的字体图标库，只对Font class引入方式进行讲解，另外两种：Unicode和Symbol不做表述。
vue项目中怎么引用阿里巴巴图标库
05-25
在 Vue 项目中引用阿里巴巴图标库，可以通过以下步骤来实现： 1. 安装 @ant-design/icons-vue 包 ``` npm install @ant-design/icons-vue --save ``` 2. 在 Vue 项目中使用 - 全局使用 在 main.js 中引入 @ant-design/icons-vue 包，并将其注册为全局组件： ``` import { createFromIconfontCN } from '@ant-design/icons-vue' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js' }) Vue.component('IconFont', IconFont) ``` 其中，`scriptUrl` 参数是需要替换成您自己的图标库链接。 然后，在组件中可以直接使用 `<IconFont type="icon-xxx" />` 的方式引入图标。 - 局部使用 在需要使用图标的组件中，直接引入 `@ant-design/icons-vue` 包，并创建一个 `IconFont` 对象： ``` import { createFromIconfontCN } from '@ant-design/icons-vue' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js' }) ``` 然后，在组件中可以直接使用 `<IconFont type="icon-xxx" />` 的方式引入图标。 以上就是在 Vue 项目中引用阿里巴巴图标库的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值