iconfont

iconfont对于前端应用来说有很多便捷：

1、自由变化大小

2、自由修改颜色

3、可以添加一些视觉效果如：阴影、旋转、透明度。

4、兼容IE6

在线引用和下载到本地两种方法

一。在线引用

图标的制作和上传可以参照官网给出的文档：Page 1

图标的下载和使用官网上说的不是很清楚，简单介绍下：

1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”

<img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL3BpYzIuemhpbWcuY29tLzZhMTBkMzFmNGFkOGY2MmFlMzkyMGQ4NDZkOTRiZTc5X2IucG5n.jpg" data-rawwidth="1165" data-rawheight="522" class="origin_image zh-lightbox-thumb" width="1165" data-original="https://pic2.zhimg.com/6a10d31f4ad8f62ae3920d846d94be79_r.png">2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。2.选择完所有要用的图标后“存储为项目”，给它命名。然后在“图标管理”-“图标应用项目”中找到这个项目，获取在线链接，把里面的代码复制到CSS中。
<img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL3BpYzEuemhpbWcuY29tLzQyOTZiMmQ0YTgzZDMxZTIwODIxYmI0YjZhYWVkOGM4X2IucG5n.jpg" data-rawwidth="879" data-rawheight="494" class="origin_image zh-lightbox-thumb" width="879" data-original="https://pic1.zhimg.com/4296b2d4a83d31e20821bb4b6aaed8c8_r.png">3.在HTML中需要使用到图标时，使用iconfont类名。3.在HTML中需要使用到图标时，使用iconfont类名。

<i class="iconfont"></i>

里面写上你想用的图标下面的Unicode：
&amp;amp;lt;img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL3BpYzEuemhpbWcuY29tLzcyOGU5MzU1YTk0Mzg0N2FjOTQ1YzQ2M2ViNzk2NmYwX2IucG5n.jpg" data-rawwidth="869" data-rawheight="308" class="origin_image zh-lightbox-thumb" width="869" data-original="https://pic1.zhimg.com/728e9355a943847ac945c463eb7966f0_r.png"&amp;amp;gt;
4.然后你可以通过控制iconfont类的属性改变图标的样式，比如：

.iconfont{
	font-family:"iconfont";
	font-size:16px;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
        padding-left:20px
}

就可以在页面中引用和修改了。
&amp;amp;lt;img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHBzL3BpYzIuemhpbWcuY29tLzA3MmUzZTQ2MTIxMDA4YTUyOGNiODcxMzVmM2ZlZWRkX2IucG5n.jpg" data-rawwidth="411" data-rawheight="57" class="content_image" width="411"&amp;amp;gt;
官网中还列出了使用时候的兼容性问题及其解决方法：Page 2

原文：作者-班星灿

链接：http://www.zhihu.com/question/25952487/answer/71917554
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

二、放到暂存架后，点击"下载到本地",xx.zip文件。按照demo.html文件说明进行设置

我再IEtester测试ie6,ie7,ie8,ie9,ie9图标右侧有方块，按上面page2说的加display：block；不管事。ie7不显示图标，在电脑浏览器ie9.0.8中也不显示

时间： 2024-10-03 21:53:35

iconfont的相关文章

iconfont图标大全

1)不懂Iconfont-阿里巴巴矢量图标库(http://www.iconfont.cn/)请自觉百度,或者访问官网学习. 2)最近花了近5天的时间,收藏了近1000个iconfont的图标,并经过编辑.分类.排序等步骤,终于初步达到了想要的效果. 3)啥也不说了,直接上截图. 4)效果展示: 图1 图2 图3 图4 图5 图6 图7 图8 图9 图10 图11 图12 图13 图14 图15 图16 图17 图18 图19 图20 图21 5)资源文件截图 6)谁有意向拥有这些资源,可以扫描

Android程序中使用iconfont心得

1.关于iconfont iconfont既是icon又是font,具体来说应该是用font形式展现的icon.与传统图片格式的图标不同,这一种图标因为是以字体形式展现的,所以更改大小.颜色.背景颜色都非常方便. 2.使用方式 2.1 下载资源 资源来源:http://www.androidicons.com/ 根据引导找到下载链接.下载解压后找到iconfont/font,把里面的四个文件拷到Android项目中的assets目录下.找到glyphs/glyphs.html,因为之后会用到,所

前端工具----iconfont

在一张页面中我们经常会看见一些小的图标,这些图标小巧.意义明确,总之非常有用,难道他们是一些小图片吗.不错有的的确是小图片,但是在这里我将介绍另外一款工具那就是iconfont,我们可以把这些图标当做一个个文字来对待,因此我们可以调整它的大小和颜色.下面我来介绍一下如何使用. iconfont有两种引入方式,一是在html的style标签中引入iconfont官网生成的自动链接,二是将选中的字体图标下载到本地,利用link标签引入外部css文件. 在线使用: <style type="te

PC端使用iconfont图标

原来看过iconfont,但是没用过,今天尝试着用了一下!看看怎么用的: 第一步:下载 讲自己需要的图标(可以通过搜索查找)添加到暂存驾,以前是购物车!然后点下载或者存储到CDN. 这个图是偷的: 第二步:看看 下载后大概是这个样子: 里面有个demo.html,打开看看,上面详细讲解了图标的class.字符实体.当然了,还有使用方法 三.使用: 字符实体方式: HTML: <!DOCTYPE html> <html lang="en"> <head>

iconfont的引入方法

第一步:使用font-face声明字体@font-face {font-family: 'iconfont';src: url('iconfont.eot'); /* IE9*/src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('iconfont.woff') format('woff'), /* chrome.firefox */url('iconfont.ttf') format('tr

如何使用iconfont字体图标代替网页图片？

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

来自阿里妈妈的iconfont(转）

转自http://www.augsky.com/775.html 随便说说两者的优缺点 其实主要是说iconfont的优点和Font Awesome的缺点.-_-|||iconfont的图标库相当巨大,我在写上一篇文章的时候还是51794个,现在刷新之后图标数量已经是52090个了.如果这么大的一个库里面仍然没有你需要的图标的话,你也可以自己动手制作你自己的图标然后使用网站的在线生成工具来生成字体文件,分分钟就可以使用了. 除了拥有巨大的图标库之外,iconfont最值得推荐的原因还在于她使用上

!!图标（iconfont、fontawesome 等）

http://www.iconfont.cn/  阿里巴巴矢量图标库 iconfont http://fontawesome.io fontawesome图标 http://www.bootcss.com/p/font-awesome/#icons-new  2015-10-27 一.iconfont 图标库的使用: 第一步引入,第二步定义iconfont样式: /*第一步:使用font-face声明字体*/ @font-face {font-family: 'iconfont'; src: u

IconFont的使用方法

IconFont的作用就是用字体格式来取代图片.特殊字体的展示,用的比较多的就是一些纯色的图片,具体主要有当前CSS3属性里的自定义字体(@font-face)来实现. 1.先来说说它的优缺点: 优点:体积比图片小,可以变化大小和颜色,而图片则是不可以的. 缺点:由于是字体模式,所以只支持纯色,多颜色则是不支持. 2.如何使用: 2.1.字体的格式,不同的浏览器支持的字体格式是不一样的,具体如下: *webkit/safari:支持True Type/Open Type(.ttf),IOS4.2

Iconfont在移动端应用的问题

关于部分奇葩用户代理不显示字体图标 以酷派为代表的部分安卓手机自带浏览器.微信/QQ WebView 等用户代理无法正常显示 Icon Font,原因可能是这些用户代理无法正确处理伪元素 content 的五位数的 Icon Font 十六进制编码,详情参考 Iconfont 在移动端遇到问题的探讨,可以通过这个页面进行测试. 解决方式有两种: 将 Icon Font 编码限制在 4 位:Amaze UI 直接使用 Font Awesome,不可能去调整近 500 个图标的编码. 将 Icon