iconfont-矢量图标字体的运用

发现一个奇怪的现象：(http://m.muzhiwan.com)

这里面的图标竟然不是一张张小图标图片？Firebug下查看一下元素，竟然是这样的：

页面源代码如下：

好奇怪啊，这些个乱七八糟的&#xfxxx难道就是对应的图标？于是产生了好奇心，百度一下，发现原来这是矢量图标字体！

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：
1.自由的变化大小
2.自由的修改颜色
3.添加阴影效果
4.IE6也可以支持
5.支持图片图标的其它属性，例如，透明度和旋转等等
6.可以添加text-stroke和background-clip:text等属性，只要浏览器支持

那么如何使用iconfont呢？可以有如下几种方式：

1.使用现有的开源iconfont矢量图标字体库。如

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

icomoon

http://icomoon.io/app/#/select

可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。很酷吧！

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

2.创建自己的iconfont字体库，可以使用以上各平台的在线生成工具，也可以推荐使用一些生成iconfont的工具，如iconmoon。

3.那么具体该如何使用这种字体图标呢？其实很简单，以PC端的应用为例，只需要分三步即可完成：

以上demo使用方法详情请参考：http://www.iconfont.cn/help/iconuse.html

参考文献：

http://www.iconfont.cn/

http://www.chinaz.com/design/2012/0904/272556.shtml

http://www.weste.net/2013/12-13/94697.html

转载于:https://www.cnblogs.com/zzuIvy/p/iconfont.html

iconfont-矢量图标字体的运用相关推荐

矢量图标库如何引入html,Iconfont矢量图标库在网站中的使用方法
原标题:Iconfont矢量图标库在网站中的使用方法大家都知道现在移动端网站设计比较热门,由于移动端的网站页面的收缩性要求很高,必然在网页设计中,一些小点的图标,使用图片收缩性,以及美观上并不是很理 ...
# 一、阿里矢量图标(字体图标)网址：https://www.iconfont.cn/#### 1.使用步骤1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右
一.阿里矢量图标(字体图标) 网址:iconfont-阿里巴巴矢量图标库 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解 ...
阿里矢量图标(字体图标)使用
一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择 ...
iconfont 转换为图标字体。
iconfont 阿里巴巴矢量图库是个好东西呀~ http://www.iconfont.cn/ 巨大的图标库,可惜都是png的,不能随意用作字体图标. 这里讲一下,如何将iconfont转换为字体 ...
29.html的iconfont（图标字体）
文章目录图标字体(iconfont) 推荐下载链接一(fontawesome) 推荐下载链接二(阿里巴巴矢量图标库) iconfont的其他用法(阿里巴巴图标库) 图标字体(iconfont) 图标 ...
、阿里矢量图标(字体图标)
# 一.阿里矢量图标(字体图标) 网址:https://www.iconfont.cn/ #### 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4. ...
iconfont（图标字体）
iconfont(图标字体) iconfont(图标字体) fontawesome 使用步骤通过伪元素来设置图标字体通过实体来显示图标字体 iconfont 使用步骤 a)使用Unicode引用方 ...
不知道怎么用小图标？简单的iconfont矢量图标教学,装饰你的网页
iconfont矢量图标教学
CSS阿里矢量图标(字体图标)
网址: https://www.iconfont.cn 1.使用步骤 1.登录阿里矢量图标网站 2.搜索想要的图标且加到购物车 3.点击右上角的购物车 4.选择下载代码,下载完成后解压文件 5.把下载 ...
阿里妈妈iconfont矢量图标的使用方法(超详细)
iconfont使用方法 1.为什么要使用iconfont? 之前我们一直使用的是雪碧图,虽然好用,但是也是有一定的限制的,比如说,你希望这个图标大一点,当然你也可以调节雪碧图的大小但是此时会出现图片 ...

iconfont-矢量图标字体的运用

iconfont-矢量图标字体的运用相关推荐

最新文章

热门文章