iconfont的基本使用

阿里巴巴的iconfont网站有很多小图标可供我们使用，链接如下iconfont网站链接。

这个图标资源库可以一个图片一个图片的下载，也支持批量下载。下面我来介绍下批量下载。

进入网页之后，可以选择自己需要的小图标，将鼠标移动到小图标上之后，就会出现如下所示的3个按钮。

这3个按钮分别是添加到购物车、收藏、下载的按钮。如果需要批量下载图片，我们可以先添加到购物车。

加入购物车之后，点击购物车按钮就会在右侧出现一个弹框。

点击添加到项目（添加到项目，可以根据自己的需要设置下载哪些选项）

点击添加到项目之后会出现项目选择弹框。可以选择已创建的项目，也可以重新创建一个项目。

点击右侧的“+”图标可以输入要创建的项目名称

输入名称之后，点击确定会进入项目界面

点击项目设置按钮，对项目进行设置

勾选配置之后保存。（注意一定要先勾选Base64，之后再勾选EOT和SVG，EOT和SVG这两项勾选才会生效）

保存之后点击下载到本地，即可下载压缩文件在代码中进行使用了。

iconfont的基本使用相关推荐

史上最简单粗暴获取阿里巴巴iconfont图标，并引用到vant的方法（没有之一）
1.直接去www.iconfont.cn复制自己喜欢的图标svg 2.粘贴到html里面 3.设置css中svg path的fill属性颜色色值,就可以改变icon图标的填充色,p话不多说,上代码↓ ...
微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
微信小程序如何使用iconfont阿里巴巴图标库？
步骤: 1.如图先下载: 2.找到iconfont.css改为iconfont.css 3.修改iconfont.wxss文件的内容,如图复制内容至其文件 4.替换到文件页面当中 5.去页面中引入i ...
iconfont 在vue项目中的应用（icon-component组件）
前言:上一篇记录了iconfont的三种基本使用方法. 在Vue中应该如何使用呐?Vue中的组件化思想很明确,要提高组件的复用率,增强项目的可维护性,扩展性.以下是采用icontfont的使用方式之s ...
Android使用iconfont
iconfont是什么简单一句话说就是将图标转换为字体,显示图标就像显示文字一样方便. 优缺点优点 1.由于IconFont是矢量图标,所以可以轻松解决图标适配问题 2.图标以字体文件的形式存在项 ...
Swift使用iconfont图标
iconfont怎么在iOS中使用了什么是iconfont? 简而言之就是将图标用文字(通过编码)字体的形式显示. 优点:减少项目体积包, 减少切2倍图和3倍图 , 各设备显示效果都不错, 可 ...
icon-font与svg
icon font 使用与svg应用分享 icon font 字体概述 css3增加了@font-face属性,传统的浏览器是通过font-family来设置字体,如果系统里没有的话就用其它字体来代替 ...
iconfont svg图标不能更改颜色的解决方法
iconfont svg图标不能更改颜色的解决方法参考文章: (1)iconfont svg图标不能更改颜色的解决方法 (2)https://www.cnblogs.com/chaoyueqi/p/ ...
如何在微信小程序中使用iconfont
开篇废话开发过小程序的童鞋肯定都会遇到这样的问题,当我们在小程序中使用iconfont官方推荐的方法插入字体时,我们总会得到一个打印机(滑稽).那么如何在小程序中正确的使用iconfont呢? 一. ...
emoji表情与 iconfont 一锅炖
什么是emoji? ??????????????????????☺???????????????? 上一这一排就是emoji表情.一大波Windows用户懵逼了,这是什么鬼表情(这么丑),冒牌的吧,看 ...

iconfont的基本使用

iconfont的基本使用相关推荐

最新文章

热门文章