关于阿里巴巴iconfont的使用方法
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/
转载于:https://www.cnblogs.com/mangoniuniu/p/7656060.html
关于阿里巴巴iconfont的使用方法相关推荐
- iconfont 图标转为字体_阿里巴巴Iconfont矢量图转为字体图标的方法
我们在做网站时,网站里会有很多的小图标,通常这些小图标会使用小图片来制作,但修改起来比较麻烦.所以现在很多网站都使用字体图片来制作小图标. 今天学做网站论坛介绍一下阿里巴巴Iconfont矢量图转为字 ...
- iconfont图标引入方法
iconfont图标引入方法 图标库链接 阿里巴巴矢量图标库链接: [https://www.iconfont.cn/](https://www.iconfont.cn/). 使用方式 引入方式 添加 ...
- mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法,vue使用Muse-UI引入阿里巴巴字体图标的方法
Muse-UI引入阿里巴巴字体图标的方法,以及mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法 好紧张第一次写博客,第一次总是痛并快乐着.?有写的不对的,不欢迎广大网友指正? ...
- vue引入阿里巴巴iconfont图标(简单易懂)
vue引入并使用阿里巴巴iconfont图标流程 为什么要使用阿里图标库: 有些时候你需要的图标是真的在elementul里没有的或者完全不适合的. 这时候我们需要去到阿里的图标库里找找,这里的图标非 ...
- iconfont 图标宽高出问题_阿里巴巴Iconfont加入部分图标后导致所有图标高度拉升问题...
现在是移动互联网时代,而随着这个时代的到来网页设计也偏向于扁平化,对于很多网页使用的图标都不再像以前那样使用一些写实的图标了,而都是使用一些扁平化的图标了.当前,不管是在PC端还是在移动端,很多ico ...
- 微信小程序使用阿里巴巴iconfont字体图标
打开阿里巴巴iconfont官网(http://www.iconfont.cn/); 把用到的字体图标加到项目里面; 进入到项目里面,选择font class方式来使用,如果没有生成过代码的同学点生成 ...
- Html 使用svg图标、iconfont的使用方法
iconfont的使用方法_cocytus-CSDN博客_iconfont使用方法 iconfont的使用方法 HTML5如何使用SVG - 知乎 HTML5如何使用SVG_聚风阁-CSDN博客_ ...
- 阿里巴巴IconFont的图标的下载使用
阿里巴巴IconFont的图标的下载使用 前言 阿里巴巴矢量图标使用步骤 前言 接着上一篇<Vue实现图片验证码.邮箱验证码以及Cookie记住我功能>,这篇文章主要给大家介绍下阿里巴巴矢 ...
- 添加新的iconfont图标的方法（看了就会）
一.用Unicode引入新iconfont图标 Unicode方法引入只需要保留下载的.tff.woff.woff2等字体文件,其他文件都是无关的 1.将阿里给的@font-face{-}复制到你项目 ...
最新文章
- 电子科大博士生杨超火了！2年实现Science+Nature一作双杀
- php博客添加live2d,在博客中增加自己的live2d纸片人模型方法
- 前端学习（3215）：类的编写
- 设计模式（六）J2EE 模式
- 使用Pycharm将代码同步到GitHub
- 读书笔记∣写给大家看的设计书
- ZendFramework多模块配置
- C++内存详解[精]
- gRPC调试, 用 Apipost
- 学UG编程，首先要学习什么？那些编程都是操机操出来的吗？
- 台式电脑组装机相关知识之主板篇
- 高新技术企业定义和好处
- 结构体对齐和补齐(详细解释)
- FFmpeg----图片处理
- cesium 流动线 发光线（道路线）
- 视频点播技术android,基于Android机顶盒VOD视频点播系统的设计与实现
- 计算机保存图片找不到桌面,保存的图片在桌面但是找不到。怎么办？
- 3.3.1 同相比例运算放大电路
- 无限互联iOS视频教程及课件PPT源码
- C语言 typedef关键字