阿里巴巴矢量图标的使用

最新推荐文章于 2024-07-16 11:12:38 发布
最新推荐文章于 2024-07-16 11:12:38 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45704506/article/details/108772148
版权
本文介绍了如何使用阿里巴巴矢量图标库解决前端开发中图标需求的问题。通过搜索图标，选择合适的格式、颜色和大小后，可以下载并以代码形式引入到项目中。通过在CSS中修改样式，实现图标在网页上的个性化调整。
摘要由CSDN通过智能技术生成

阿里巴巴矢量图标网址 ：https://www.iconfont.cn/.

平时做前端，很多小图标找不到，或者图标颜色，大小不是很合适，阿里巴巴矢量图标，在很大程度上解决了这一问题

打开上面的网站，通过搜索自己想要的图标，我就以微信图标为例

在这里插入图片描述
你需要用什么图标就搜什么图标
在这里插入图片描述
然后选择自己想要的图标，点上去就会出现两种下载方式
在这里插入图片描述
下面那个是下载图片格式
在这里插入图片描述
当格式，颜色，大小都选择好之后，就可以下载使用，我个人不是很喜欢这个，我更喜欢另一种方式。就是通过下载代码的方式，那样更好根据页面进行调节。
另一种方式就是点击最上面那个购物车，添加到购物车里面

最低0.47元/天 解锁文章
天启之极
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
阿里巴巴矢量图标使用
qq_45716326的博客
09-20 280
在制作 小程序时需要用到一些图标，可以从阿里巴巴矢量图标库免费获取一些图标。 链接：https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2790902 首页注册登录自己账号： 搜索自己要的图标，例如点赞， 在想要图标上点入库，再点右上角购物车的图标： 添加至要做的项目或者新建项目，项目分类可以保存你要做的项目里可能用到的所有图标 每添加新的图标，图中的代码都要刷新，复制下来在新的页面.
阿里矢量图标库
04-26
阿里矢量图标库
阿里巴巴矢量图的使用
08-10 1390
9.在页面中引入 图标， 在仓库中， 图标的名字是 el-icon-denglu, 那么在页面中 就引入这个名字就可以了。7. 在vue项目的 src > ssets 下新建 icon文件夹， 将剩下的六个文件 放进去。8.在 main.js 中 引入 iconfont.css 文件。6. 删除红色标记的四个文件。......
阿里巴巴矢量图标库首页
最新发布
2302_76980664的博客
07-16 993
【代码】阿里巴巴矢量图标库首页。
阿里巴巴矢量图标如何使用
夏日漱石的博客
07-23 1097
阿里巴巴矢量图标如何使用
一文搞定阿里巴巴矢量图库
m0_47186697的博客
03-20 2103
一文搞定 阿里巴巴矢量图
阿里矢量图标(字体图标)
Bx_bjx的博客
10-09 198
阿里矢量图标
如何在项目中使用阿里巴巴矢量图标
03-27
在项目中使用阿里巴巴矢量图标是一项常见的前端开发任务，它能提供美观且可自定义的图形元素，同时保持页面加载速度。阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont...
copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载
05-11
一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。 苦于每次想要使用图标库 的图标都需要下载图标===拉到文件夹====写文件路径/...
阿里巴巴矢量图标批量下载 IconontDownload.js
09-04
如何批量下载阿里巴巴矢量图标库的图标？ 1.打开阿里巴巴矢量图标库的项目；2.按F12打开浏览器的开发者工具，复制并执行自动下载图标的代码。
什么是阿里巴巴矢量图标库
weixin_74900246的博客
02-26 310
保姆级教学
决定要收藏，让你白嫖阿里矢量图（iconfont矢量图使用）
weixin_47514459的博客
09-26 2938
相信大家在学习css的时候总时对小图标表示不得其解，用的是图片还可以存储下来，用图片解决，单身有一些是奇怪的数字，啊，这，相信大家懂得小白的无赖，开完这篇文章相信大家对矢量图的使用一定更好！ 阿里矢量图网址https://www.iconfont.cn/打开小编给定的网址就可以看见这样一个好看的网页了。 下面进行登录（小编推荐使用 guthub账号！） 不会注册不要怕，库的搭建也有说明：小白都可以的注册使用说明 在GitHub搭建好库后，下面选择好你的图标（相信大家对自己的选择都不...
阿里矢量图标库的使用
CSDN_1999的博客
01-10 1317
1、注册登录账号 网站地址：https://www.iconfont.cn/ 该网站可通过GitHub或新浪账号进行登录 下面是网站的首页 2、查找图标 在中间输入框输入想要查找的图标,。以‘home’为例，点击搜索，即可得到以下页面。 3，将图表添加至项目。 选中自己需要的图标，将其添加入库，这时再点击页面右上角的购物车图标 弹出以下页面，点击添加至项目，如...
关于阿里矢量图iconfont的应用
sinat_40553719的博客
12-07 4362
1、IconFont 是什么？ IconFont拆开来看，就是 Icon 和 Font。简单说，就是我们平时用的字体，不再是我们传统认知上的“文字”，而是一个个的图标。是一种矢量图标。我们可以用代码呈现在我们的页面上。 2、iconfont的制作。 可以用ai ps等各种图形处理软件来做。（以后具体详解怎么用这些软件来做） 3、iconfont的使用 使用在线库（一般都用这个方法） 首
iconfont阿里巴巴矢量图标库的使用
pp
10-27 417
iconfont阿里巴巴矢量图标库的使用 iconfont阿里巴巴矢量图标库地址 找到需要的图标 加入购物车 加入项目 下载到本地 复制一下文件到相应目录 main.js 引入css：import ‘./common/style/font/iconfont.css’ //相对路径 点击获取代码，在父级加iconfont类名即可 Iview图标点击复制代码即可 有用文件： 应用：...
Vue页面快速使用阿里巴巴矢量图标库
夏日漱石的博客
09-23 1541
Vue页面快速使用阿里巴巴矢量图标库
阿里巴巴矢量图的使用方法
热门推荐
浮萍的博客
03-14 2万+
看到阿里巴巴的网站时发现 购物车前面的图标不是用img来做的，是用阿里巴巴的矢量图来做的。接下来介绍一下，关于阿里巴巴矢量图的使用方法。 1.首先进入网站 http://www.iconfont.cn/ 2.在输入框中输入自己需要的图标 比如输入：购物车 3.添加入库  4.单击购物车图标的按钮，如图所示  点击添加至项目，创建一个项目名。这里可能会让你登录账号，所以登录账号就行。 5.编码方式选...
使用 阿里巴巴矢量图标库
08-13
要在Uni-app中使用阿里巴巴矢量图标库，可以按照以下步骤进行： 1. 注册并登录阿里巴巴矢量图标库（https://www.iconfont.cn/）的账号。 2. 在阿里巴巴矢量图标库中搜索需要的图标，选择并添加到自己的项目中。 3. 在项目中创建一个字体图标库文件夹，将从阿里巴巴矢量图标库下载的字体文件（通常是.ttf或.otf格式）放入该文件夹中。 4. 在项目的`index.html`文件中，通过`<style>`标签引入字体图标库，并设置其`font-family`属性。例如： ```html <style> @font-face { font-family: 'iconfont'; src: url('path/to/iconfont.ttf') format('truetype'); } </style> ``` 5. 在需要使用字体图标的地方，使用`<text>`或其他合适的组件，并设置`class`属性为图标对应的类名。例如： ```html <text class="iconfont icon"></text> ``` 在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。 6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。 请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。 希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值