阿里巴巴icon在vue项目中使用方法

最新推荐文章于 2024-06-03 21:58:46 发布

xiaoming_0208

最新推荐文章于 2024-06-03 21:58:46 发布

阅读量364

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaoming4965/article/details/128716046

版权

前端专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、打开阿里巴巴矢量图库，把需要的放入购物车我的资源-项目中查看

链接地址：iconfont-阿里巴巴矢量图标库

2、下载保存的项目下载font class 类型

3、下载的文件放入assets文件中

4、在main.js中全局注册引入的assets文件

import './assets/icons'

5、在页面中使用 class="iconfont icon-a-7Dsifenping" 文件中 html页面有写法

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xiaoming_0208

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
阿里巴巴icon在vue项目中使用方法

阿里巴巴icon在vue项目中使用方法
复制链接

扫一扫

专栏目录

vue项目中使用iconfont阿里图标库

cjxIt的博客

08-17

913

5.在vue项目中 css新建一个文件夹把图4解压后的复制到css目录下如下图。6.在vue入口mian.js中引入图4的 iconfont.css 如下图。2.根据搜索选择自己想要的图片添加到项目中或者新建项目如下图。7.iconfont.css 里面的内容如下图。3.添加之后如下图点击下载至本地。4.下载本地解压后的文件如下图。8.在vue各个组件中使用方法。1.进入icon 官网。

在vue项目中引入并使用阿里iconfont图标

Zoey_J的博客

12-22

748

打开官网 → 我的项目 → 下载到本地 → 解压缩下载的文件解压后的文件夹：将需要的文件拖入项目将以下几个文件拖入项目，放到创建的文件夹中将 .css 文件中的路径设置为与文件位置一致这里我分了 css 和 icon 文件，也可以放一起怎么样都行，只要 .css 文件中的路径写对就没问题。在 main.js 中引入引入之后就可以在项目中引用项目中已有的图标了...

参与评论您还未登录，请先登录后发表或查看评论

若以vue引入阿里巴巴iconfont图标

最新发布

someTuzkis的博客

06-03

305

若依vue使用阿里巴巴iconfont图标

vue中使用阿里图标

qq_62917185的博客

07-27

905

4.在css文件夹中再创建一个文件夹（我在这里命名为iconfont），因此将iconfont.ttf,iconfont.woff,iconfont.woff2三个文件复制粘贴到iconfont文件夹中；3.在vue项目中的assets文件夹中创建一个css文件夹，将iconfont.css文件复制粘贴到css文件夹。5.修改iconfont.css文件里面的其他三个文件的路径；6.在main.js文件中引入iconfont.css文件；8也可以在iconfont.css文件中修改样式；...

Vue项目引入icon图标(阿里巴巴矢量图标库)

weixin_59528719的博客

02-28

1237

当element-ui库中的图标无法满足我们的需要时，我们可以选择引入第三方的图标进行使用，下面是引入图标步骤。

vue项目中使用阿里icon库

gcy_rose的博客

02-02

641

从阿里字体图标库新建一个项目（当然也可选择其他icon库） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190202225650587.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2djeV9y...

vue 使用 iconfont-阿里巴巴矢量图标库

一心只想敲好代码

02-26

356

vue 使用 iconfont-阿里巴巴矢量图标库

如何在项目中使用阿里巴巴矢量图标

03-27

在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...

vue element项目引入icon图标的方法

12-07

总结来说，通过以上步骤，你可以成功地在Vue Element项目中引入阿里巴巴图标库，丰富你的项目图标资源。在操作过程中，确保每个步骤都正确执行，避免命名冲突和样式覆盖，以实现图标库的顺利集成。如果你在操作过程...

vue和小程序项目中使用iconfont的方法

01-19

一、vue中使用iconfont 1、百度搜索iconfont或者阿里巴巴矢量图标库官网，注册登录； 2、找到图标管理->新建项目，或者使用已有的项目，用于保存自己的图标； 3、搜索自己需要的icon； 4、添加到购物车中； 5...

Vue3.x后台系统模板：Vue3+Router+Vuex+Ant+Axios+Less+A_Li_Icon

05-24

在 Vue 项目中，Axios 可以方便地集成，用于与后端 API 进行数据交互，支持 GET、POST 等多种请求方法。 6. **Less**: Less 是一种 CSS 预处理器，允许开发者使用变量、嵌套规则、运算符等功能编写更易维护的 CSS ...

【Vue】前端项目引入阿里图标

m0_61049675的博客

01-30

605

注意：iconfont是固定的，icon-sousuokuang为图片红框部分。

vue前端项目引入iconfont阿里图标（font class）

m0_64562972的博客

12-04

901

阿里巴巴矢量图标库使用

阿里icon小图标在vue中的教学使用（两种主流方案）

您的博客

02-16

9357

1.小图标的前世今生。曾几何时，H5开发还是以雪碧图作为小图标的一种处理方案；然而，随着时间迁移，在当今前端开发环境中，icon小图标的使用率越来越高，需求越来越精致。虽然Element、Iview、Vant等组件库也相应提供了一些自带的icon图标，可是在追优的PM眼中，高大上的icon小图标才是其所想要的。本着专业人做专业事的心境，挑选和使用最优，最好的小图标就成了前端开发们的一种准则。 2.阿里巴巴 -- iconfont。在众多icon小图标的资源站中，阿里巴巴的iconfont无疑是其中

Vue项目中引用‘阿里巴巴字体图标库iconfont’，2024年最新深度解读Netty

zhuceyigecsdn的博客

04-18

528

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些前端面试题以及学习路线给大家网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）一个人可以走的很快，但一群人才能走的更远！

Vue页面快速使用阿里巴巴矢量图标库

夏日漱石的博客

09-23

1427

Vue页面快速使用阿里巴巴矢量图标库

我是如何在开源系统中（Vue）中引入阿里巴巴Icon图标的？

编码人生

04-25

1722

开始的背景是这样的，我们的系统是vue+elementui写的，直到在写一个博客的点赞的时候发现elementui并不能满足我们的需求，这是他自带的图标：于是我们就做成了以下的样子：这是使用了阿里的icon库之后的图标：是不是好看很多，好了接下来教大家怎么在vue项目中引用第一步，进去官网第二步，选择自己喜欢的图标，加入购物车（免费）第三步，进入购物车第四步，添加至项目第五步，下载代码第六步，导入到vue项目中将下载下来的所有文件放在vue项目中的icon文件夹下面.

Vue使用iconfont（阿里图标库）

m0_57742384的博客

10-19

1065

Vue使用iconfont（阿里图标库） input的placeholder

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 项目中引用阿里巴巴图标库的方法。