阿里巴巴图标iconfont使用方法

图标库有很多,例如: Font Awesomebootstrapfontello等,阿里巴巴也提供了很强大的免费图标库:iconfont,下面就来介绍一下免费的使用方法。

1、登录阿里巴巴矢量图标库,网址:https://www.iconfont.cn/

2、登录账户(可以用微博、GitHub账号直接登录)

3、搜索自己需要的图标,例如:手机,不得不说,图标非常之多!(下面显示的只是部分内容)

4、选取自己需要的图标,添加入库

5、搜索并添加自己需要的其他图标入库,例如我添加了一些

6、引用阿里图标库的方法有三种,分别是:调用阿里cdn远程引入,下载图标引入图标文件(支持PNG和SVG和AI格式图片下载),下载图片字体文件自行引入(下载下来的压缩包中有演示文档及使用说明)

7、对于阿里图标库中不存在的图标或者说,你没有搜到这款图标,但是你在别的图标库中下载到了这款图标的话,你还可以将该图标上传到你的项目里面去,这样,你就可以通过阿里图标库来调用这款图标了。

以阿里CDN引入为例:

每个图标需要引入时,只需要先引入阿里云提供的cdn,然后在需要添加图标的地方添加如下代码就可以了:

<i class="iconfont 这里是图标代码"></i>
(0)

相关推荐

  • 2021年最值得收藏的11个图标素材库

    在设计过程中,每个设计师都绕不过"图标",好的图标库对设计师来说是非常难得的. 不同的图标库的特征和功能都不一样,就需要我们不断地筛选适合自己设计项目的图标库.今天,小憨给大家分享 ...

  • vue 中使用 iconfont

    一.从 iconfont 官网下载图标库至本地 1.进入我的项目,将要使用的项目打包下载 2.下载到本地的文件是压缩形式,解压缩得到以下内容: 二.将本地库添加到 vue 项目 1.在 vue 项目 ...

  • 大厂出品免费图标资源站

    IconPark 字节跳动出品矢量图标样式的开源图标库 编程导航开源仓库:https://github.com/liyupi/code-nav IconPark 图标库是一个通过技术驱动矢量图标样式的 ...

  • 线性图标在PPT中的使用与拓展

    本文总计:1913 字 预计阅读时间:5 分钟 上午好呀,上周我给大家分享了 40 个系列,共 2000 款高质量线性图标. 东西虽好,但可能不少小伙伴并不会使用,或者说只看到图标素材本身,无法向外延 ...

  • reactnative 自定义项目的图标库

    前言: github比较火的有如react - native -vector- icons等图标库,为什么提到这些第三方库. 首先明确一个点,你是否需要现成的第三方图标库? 优点:开箱即用,内容丰富 ...

  • 还在到处找PPT素材?我私藏的8个高清PPT素材网站,全部分享给你们!

    Hello,各位叨友们好呀!我是叨叨君~ PPT文件作为职场中常用的展示工具,是很多职场新人都需要学习的技巧,制作PPT并不难,但怎么做出让人眼前一亮的PPT呢? 我整理了一份关于制作PPT的工具网站 ...

  • 小程序使用阿里巴巴图标库的方法

    选择购物车的里的字体图标库 点击阿里巴巴图标库的购物车,来到此页面,点击添加项目 项目添加过后如图,点击font class累引入,点击查看在线链接,复制链接url访问在线链接 访问链接过后,页面展示 ...

  • 阿里腾讯在线battle,这5款大厂出品的神器,哪个最好用?

    提起腾讯.阿里.百度这些大厂,你第一个想起的是什么? 微信?淘宝?搜索引擎? 其实,除了这些主打的软件和网站,大厂还推出了很多小众的实用工具. 今天给大家分享5款大厂出品的小工具,个个都是精品! 1. ...

  • 全新开源iconfont矢量图标库CSS.GG

    今天给大家推荐一款非常值得一用的开源矢量图标库CssGG. css.gg 又一款供设计和前端开发的工具图标库,star高达6.5K .拥有超过700 个矢量图标,可被用于.css|.svg|.tsx| ...

  • Word2016图标不正常怎么办?Office2016图标异常修复方法

    针对Word2016升级后docx图标显示不正常的问题,神通广大的网友们给出了大量的解决方案,但其中大部分都是选择通过默认关联来处理.不过,这种方法并不适用于所有的情况,甚至在一定程度上毫无效果!下面 ...

  • 360浏览器图标不见了怎么办 360浏览器桌面图标不见解决方法

    遇到360浏览器图标不见了怎么办?小编以360安全浏览器为例,为大家讲解一下操作的过程. 1.打开360软件管家--软件卸载,找到360安全浏览器,并点击. 2.点击"打开安装目录" ...

  • win10重装系统后没有我的电脑图标的解决方法

    发布时间:2017-08-25 15:49:11   作者:佚名 我要评论 对win10进行重装,发现win10重装后桌面图标都不见了,这是怎么回事呢?篇文章主要介绍了win10重装系统后没有我的电脑 ...

  • win7如何去除快捷方式的小箭头|win7隐藏快捷图标箭头的方法-系统城

    通常桌面上都是放置程序的快捷方式图标和系统图标,方便用户使用,可是快捷方式图标有一个特别的标识,就是图标左下角会有一个小箭头.有些win7 64位旗舰版用户却非常反感这个小箭头,那么在win7如何去除 ...

  • Win10桌面图标箭头去掉的方法总结

    今天打看电脑,看到桌面图标有小箭头,很不舒服,就想把它去掉,找了百度去掉了,相信很多人都想去掉今天把方法总结一下,希望可以帮到你.有好几种我用的是第二种,其他的也试了. 一: 注册表去图标箭头 首先我 ...

  • 阿里巴巴招募鉴黄师:日薪1000元!报名方法是......

    说起鉴黄师,很多小伙伴都觉得是个很神秘的职业,羡慕这个工作每天都能阅片和看图无数,甚至不少男同胞们都说"工资多少无所谓,我只想专心工作".但很多人却不知道怎么才能应聘到这样的职位. ...

  • 桌面图标出现小黄锁怎么去掉?电脑桌面图标有黄锁的解决方法教程

       发布时间:2014-02-03 11:10:47   作者:佚名    很多网友在下载文件的时候,桌面图标出现了小黄锁.如何去掉桌面图标小黄锁呢?接下来一起来看看去除桌面图标小黄锁的解决方法 如 ...

  • 解决Win7系统任务栏电脑蓝牙图标不见了的方法【图文】-系统城·电脑系统下载之家

    Win7系统中蓝牙设备在日常使用中给用户带来了诸多的方便,用过的用户都知道,在Win7系统中任务栏默认情况下有电脑蓝牙图标,点击这个任务栏右下角的蓝牙图标便可进行设置连接,然而突然有天发现自己的Win ...