iconfont阿里巴巴矢量图标库的使用

最新推荐文章于 2024-12-25 15:49:19 发布
最新推荐文章于 2024-12-25 15:49:19 发布
阅读量551 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue学习笔记 文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lightoneone/article/details/128223891
本文介绍了如何从阿里巴巴矢量图标库下载图标资源，并在项目中进行引入和使用的方法。主要内容包括：登录图标库网站、选择并下载图标、将图标文件加入项目目录以及在代码中调用图标。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.图标资源下载

（1）登录阿里巴巴矢量图标库

（2）选择要使用的图标添加到项目

（3）点击下载到本地

2.在项目中引入

（1）将压缩包解压后加入项目指定目录下

 （2）在main.js中引入

import '@/assets/iconfont/iconfont.css'

3.使用

 <el-button class="iconfont icon-diannao" @click="loginOut"></el-button>

iconfont是必须加的前缀，icon-diannao是图库所给，如下图所示

 

阿里巴巴图标库iconfont的使用方式
m0_67584973的博客
07-03 5030
Iconfont 是一种图标字体服务。它将各种图标设计转换为字体格式，通过特定的代码或 CSS 样式来调用和显示这些图标。 可以理解成将图片变成了文字，文字与图片的对比就显而易见了，使用文字图标体积更小，放大也不会失真。
uniapp使用iconfont-阿里巴巴矢量图标库设置tabBar图标
m0_45858045的博客
02-03 2439
下载方式有两种，可以选择png，这种方法就是直接图片放到static文件家里，在pages.json的tabbar里面进行引用就可以了。完成所有图标之后可以进行下载，如果是使用方法二则不需要下载别的颜色的图标，只需要下载一种就可以了。2.找到想要的图标，可以直接搜索，我现在要找到适合首页，关于，还有列表的一些图标。uniapp的tabbar页面，有图标还有选择图标，设置不同的颜色。编辑好需要的图标，可以更改，完成之后选择保存为副本，也可以更改名称。刚刚选择好的图标添加到了新闻项目里面。
阿里巴巴矢量库iconfont使用方法大全
weixin_55688821的博客
07-16 3598
进入官网，打开你喜欢的任意素材库，将你喜欢的图标加入购物车。选完了就点右边的购物车。我们可以看到右下角有三个选项。第一个就是把这些矢量图直接加到自己的项目当中；第二个是直接把矢量图下载下来，不过此时下载下来的也就是图片了，不再是字体；第三种是直接下载文件。你可以选择添加至项目，右上角添加项目名称确定即可。然后我们可以看到这个页面，无论是Unicode还是Font class还是Symbol下载到本地的文件都是一样，也就是前面讲的直接下载的文件。区别是引入方式的不同。
VUE element-ui中el-button使用iconfont图标
hhb442的博客
06-27 4121
注意：这里icon-font将图标作为文字格式处理，即修改字体大小样式，icon随之改变。4、将文件解压后，在项目assets下新建文件，将解压文件放入。1、进入iconfont官网。可以看到和其他相同的效果；可以看到字体样式太大。并使用任意方式登录。
Vue项目中使用阿里巴巴矢量图标库（IconFont)
qq_41765777的博客
11-29 864
1、搜索图标 2、加入购物车 3、添加到项目 4、生成在线css文件 5、在项目中引入在线css文件 <style> @import "https://at.alicdn.com/t/font_2835759_vy9n9k1f7o9.css"; </style> 6、使用 <i calss="iconfont icon-home"></i> <span class="iconfont icon-home></spna
阿里巴巴矢量图标库（网页）
C891212的博客
05-24 1万+
首先，阿里巴巴矢量图标库网站资源非常齐全，主要包含了 图标库，矢量插画库，3D插画库，动效库，字体库等等，基本能满足小伙伴们日常开发设计需求，里面的所有素材都可以免费使用。图标库里包含有2300W+的矢量图标素材，供小伙伴们使用，可用于PPT，网站应用等，支持所有图标库，官方图标库，多色图标库和单色图标库。字体库提供了包括东方大楷，数黑体，阿里巴巴普惠体，得意体，站酷酷黑等10多种免费字体。图标素材支持AI,SVG,PNG,代码格式等等格式下载。页面上明确标明了免费使用，所以小伙伴们完全不用担心。
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
如何将阿里巴巴矢量图标库iconfont引入到vue项目中？
日常分享工作中的一些技术干货。
12-25 1153
当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？想了解更多的微服务架构实践吗？关注公众号【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。
iconfont阿里巴巴矢量图转base64资源包
07-27
这个"iconfont阿里巴巴矢量图转base64资源包"提供了将矢量图标转换为Base64编码的能力，从而优化了网页加载速度和资源管理。 首先，我们来了解一下什么是Iconfont。Iconfont，也被称为“字体图标”，是一种将图标...
关于Iconfont-阿里巴巴矢量图标库的使用
Gyanga的博客
06-09 844
Iconfont的使用???? ????进入阿里巴巴矢量图标库官网进行登录 可以通过github或新浪微博登陆 ????找到图标管理 →新建项目/我的项目 ????在图标库查找到需要的图标后添加到购物车 ????添加到购物车后点击网页右上角的购物车图标选择添加到项目 ????添加了新的图标后点击Font class中的更新代码 ????在中生成新样式代码后点击进入，内容全部复制 ????将项目中static/font/iconfont.css目录中的代码替换成之前复制的代码 Ps:该样式已在
阿里矢量图标库-iconfont使用教程
qq_52626006的博客
10-30 5813
本篇文章介绍如何在项目使用阿里巴巴矢量图标库。
阿里巴巴矢量图icon引用方法和与文字对齐的解决方法
CCG_T的博客
09-05 6794
平时写界面时经常要引用阿里巴巴矢量图icon（http://www.iconfont.cn/）， （一）引用icon有两种方法： （1）直接在html里面添加i标签（效果图如下）： <!--html--> <div class="active-focus"> <i class="icon iconfont icon-eye"></i> <p>23</p> <i class="
el-button中使用阿里矢量图标
weixin_47615289的博客
06-26 1081
/这里是文件路径的简写，只有你的图片文件名称。二，标签展示elementui自带的图标的方法。前提：vue-element-admin框架。3.直接在想加按钮的地方加下面的代码就好了。2.将图标放到下方标记的文件夹中。1.去阿里矢量图官网下载图标。
iconfont-阿里巴巴矢量图标库使用教程
张时贰的博客
12-27 1万+
iconfont-阿里巴巴矢量图标库使用教程 文章目录iconfont-阿里巴巴矢量图标库使用教程一、前言二、使用步骤三、运行效果 一、前言 iconfont-阿里巴巴矢量图标库 矢量化图标可以协助我们制作HTML，比直接插入img更快捷，页面效果也更好。它有很多优点： 图标矢量化我们在最初推行 iconfont 的时候就是为了在Retina设备上也能「丝般柔滑」，这一点图片需要另外制作两倍图，而且缩放后立马就「有码了」。在制作上，不单单是图标设计为两倍就完事了，需要在整个页面设计的时候就要
vue项目引入阿里巴巴矢量图标库图标
rainylf的博客
01-11 653
vue项目引入阿里巴巴矢量图标库图标。
阿里巴巴矢量图标的下载以及在vue项目中引入使用
ZhengDaHui360的博客
12-23 4236
阿里巴巴字体图标的下载，以及字体图标在vue项目中的使用步骤（详细）
【Element-ui】Icon 图标与Button 按钮
热门推荐
m0_62599305的博客
12-02 3万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
vue项目使用iconfont图标
weixin_46252229的博客
03-18 250
【代码】【vue项目使用iconfont图标】
阿里iconfont使用教程
m0_73935181的博客
06-15 2015
一、打开iconfont官网iconfont官方网站 二、点击右上角登录并注册三、在上方搜索框中输入想要的图标四、找到自己想要的图标，点击加入库五、点击购物车图标六、创建项目，输入项目名称七、选择Unicode，点击下载本地八、将下载好的字体图标的压缩包解压，将css文件放到项目CSS文件夹中并更改路径九、在项目中创建目录并将这三个文件放进目录十、在HTML中引入iconfont.css文件十一、挑选相应图标并获取字体编码，应用于页面
阿里巴巴矢量图标库iconfont使用
最新发布
02-21
### 如何使用阿里巴巴 Iconfont 矢量图标库 #### 注册与登录 为了能够充分利用 Alibaba 的 Iconfont 图标库，用户需先访问官方网站 https://www.iconfont.cn/ 并完成账号注册流程[^3]。 #### 创建项目并添加图标 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值