iconfont网址:http://www.iconfont.cn/

说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清。用户在iconfont.cn可以下载,多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用。

下面给大家介绍一下具体使用步骤:

1.使用新浪微博或者github账号登录一下。

2.找到图标管理->我的项目->然后新建项目:

3.查找你需要的icon,这里有两种方式:一是直接输入关键词搜索,二是通过页面上方的图标库进行查找。

4.找到心仪的图标后加入购物车,每次可添加多个。鼠标悬停在图标上就会有三个选项:添加入库、收藏、下载。我们可以直接选择添加入库,然后如上图一个类似购物车的小图标上会显示我们添加的图标个数。

被加入库的图片会如图显示,然后我们点击下载至本地按钮,选择路径会有一个压缩包被下载,解压后长这样:

把它们放在同一个文件夹里。

5.在页面中引入图标(以下图的目录为准):

我的fonts文件夹就是刚才解压之后的所有文件,demo1.html是引入iconfont的小例,具体代码如下:

需要注意的地方只有三个,一是引入iconfont.css,二是创建一个span或者i标签并给一个iconfont的类名,三是找到图标对应的unicode写在标签中,就是以&符号开头的那个。

然后这个图标就能在页面高清显示了,一般我们都用font-size来控制它的大小。

最后给大家安利一下如何改变图标颜色,回到图二我们下载的那些图标,鼠标悬停在想改变颜色的那个,选择下载然后我们就能选择或输入十六进制色码改变颜色了,然后保存成自己想要的图片格式。

希望这篇文章能帮助大家,一起加油!

http://www.iconfont.cn/

关于阿里巴巴iconfont的使用方法的更多相关文章

  1. 阿里巴巴IconFont的使用方式

    一.解释一下为什么要使用IconFont? IconFont顾名思义就是把图标用字体的方式呈现. 其优点在于以下几个方面: 1.可以通过css的样式改变其颜色:(最霸气的理由) 2.相对于图片来说,具 ...

  2. WPF使用矢量字体图标(阿里巴巴iconfont)

    原文:WPF使用矢量字体图标(阿里巴巴iconfont) 版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/lwwl12/article/details/78 ...

  3. iconFont 阿里巴巴矢量图标使用方法

    挑选图标的过程(共6步) 进入网站:Iconfont网址:http://www.iconfont.cn 点击网站上方的“官方图标库”,选择自己喜欢的图标.在这里我选择天猫的图标库. 选择好自己喜欢的图 ...

  4. 如何使用阿里巴巴iconfont矢量图片

    ①打开此网站http://www.iconfont.cn/ , 选择需要的几个图形 → 加入购物车 → 添加至项目 → 给项目随便命名 → 点击电线连接并点击代码 → 复制代码到css ②在body里 ...

  5. 阿里巴巴iconfont使用方式

    IconFont的作用就是用字体的格式来取代图片.特殊字体的展示,用得比较多的就是一些纯色的图标,具体主要由当前css3属性里的自定义字体(@font-face)来实现. 1.首先在Iconfont- ...

  6. CSS高级技巧 图标字体ICONFONT的使用方法视频

    图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方 ...

  7. iconfont 入门级使用方法

    iconfont : what? 阿里妈妈MUX倾力打造的矢量图标管理.交流平台.设计师将图标上传到Iconfont平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师 ...

  8. iconfont的引入方法

    第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); /* IE9*/src: url('i ...

  9. 微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)微信小程序使用彩色图标(阿里巴巴 iconfont Symbol 的用法)

    前提 需要安装好 nodejs (略) 用于下载插件 安装插件 npm install mini-program-iconfont-cli --save-dev 初始化配置文件 npx iconfon ...

随机推荐

  1. 教你如何前后端完全分离(非api、ajax)

    我的前后分离,不是api,不是ajax,我这里只讨论html与后端结合 前话 曾经风靡一时的dedecms相信做网站的十有八.九都知道,还有那么一些不是技术出生的人,通过看一下文档,也能访问出网站出来 ...

  2. Proxy和Reflect

    原因 最近在写 unar.js(一个技术超越react angular vue)的mvvm库.通过研究proxy的可行性.故作以下研究 Proxy代理一个函数 var fn=function(){ c ...

  3. MYSQL数据库学习十一 多表数据记录查询

    11.1 关系数据操作 并(UNION):把具有相同字段数目和字段类型的表合并到一起. 笛卡尔积(CARTESIAN PRODUCT):没有连接条件表关系的返回结果.字段数=table1字段数+tab ...

  4. js先后对某个js对象内的两个属性排序

    需求 列表中先根据某id进行排序,然后id相同的再按某属性进行排序.最终显示效果如图所示: 实现代码 var data.items = [ {'brand_id':1,'farm_id':2}, {' ...

  5. c++ --> 你可能不知道的c++

    你可能不知道的c++ 你可能不知道的 C++(一) 你可能不知道的 C++(二)

  6. Konckout第三个实例:循环绑定 -- table列表数据的填充

    传统js:拼接字符串,再写入指定标签中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. Factorials

    Factorials 阶乘 题目大意:给你一个数n,求出n ! 的最后一个非零位. 注释:n<=4200 想法:开始的想法是觉得这道题应该比较的有趣,因为我们知道,一个数的阶乘的最后的非零位后面 ...

  8. Beta冲刺 总结

    Beta冲刺 总结 1. 完成情况 经过了为其七天的beta冲刺,我们基本完成了之前在<beta开始前准备>博客中所列出的内容. 增加关于征信的功能,贴近选题主题.在学生的信用活动记录中添 ...

  9. 冲刺NO.9

    Alpha冲刺第九天 站立式会议 项目进展 项目已完成模块的模块测试工作开始进行.如学生基本信息模块和学生信用信息模块. 问题困难 框架的掌握存在一定的问题,导致项目的执行速度变慢.其他课程的作业占据 ...

  10. django模型——数据库(二)

    模型--数据库(二) 实验简介 模型的一些基本操作,save方法用于把对象写入到数据库,objects是模型的管理器,可以使用它的delete.filter.all.order_by和update等函 ...