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

1、自由变化大小

2、自由修改颜色

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

4、兼容IE6

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

一。在线引用

图标的制作和上传可以参照官网给出的文档:Page 1
图标的下载和使用官网上说的不是很清楚,简单介绍下:
1.首先在Iconfont-阿里巴巴矢量图标库(微博登录)上面将你需要的图标点击购物车按钮加入“暂存架”
<img src="https://pic2.zhimg.com/6a10d31f4ad8f62ae3920d846d94be79_b.png" 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="https://pic1.zhimg.com/4296b2d4a83d31e20821bb4b6aaed8c8_b.png" 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="https://pic1.zhimg.com/728e9355a943847ac945c463eb7966f0_b.png" 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="https://pic2.zhimg.com/072e3e46121008a528cb87135f3feedd_b.png" 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中也不显示

可以把这两个结合,给她加个class,控制颜色大小等。比如我做的极速电脑的那个图标

iconfont使用,亲测的更多相关文章

  1. nginx代理https站点(亲测)

    nginx代理https站点(亲测) 首先,我相信大家已经搞定了nginx正常代理http站点的方法,下面重点介绍代理https站点的配置方法,以及注意事项,因为目前大部分站点有转换https的需要所 ...

  2. C#读取Excel设置(亲测可用)

    OpenFileDialog openFD = new OpenFileDialog(); openFD.FileName = ""; openFD.Filter = " ...

  3. ASP.NET中的文件操作(文件信息,新建,移动,复制,重命名,上传,遍历)(亲测详细)

    做了几天的文件操作,现在来总结一下,错误之处,还望指点!以文件为例,如果对文件夹操作,基本上将File换为Directory即可(例:FileInfo file = new FileInfo(Path ...

  4. 推荐几个最好用的CRM软件,本人亲测

    CRM是英文Customer Relationship Management 的简写,一般译作“客户关系管理”.CRM最早产生于美国,由Gartner Group 首先提出的CRM这个概念的.20世纪 ...

  5. linux 系统下开机自动启动oracle 监听和实例 (亲测有效)

    [oracle@oracle11g ~]$ dbstartORACLE_HOME_LISTNER is not SET, unable to auto-start Oracle Net Listene ...

  6. IntelliJ13+tomcat+jrebel实现热部署(亲测可用)

       网上有很多介绍intellij idea整合jrebel插件实现热部署的文章,但是有的比较复杂,有的不能成功,最后经过各种尝试,实现了整合,亲测可用!步骤说明如下:   一.先下载jrebel安 ...

  7. Linux下通过crontab及expect实现自动化处理 --亲测可用

    #!/usr/bin/expect -fspawn /home/scripts/bckup.shexpect "Enter password: "  send "WWQQ ...

  8. 获取UIColor中的RGB值(本人亲测多个获取RGB值的方法,这个最有效)

    在自己研发的项目个人项目中,碰到一个从颜色中获取RGB值的需求. 在网上找了许久,也有一些方法可以获取RGB值,但不能获取黑白以及灰色的值(他们是非RGB颜色空间,不清楚什么意思,反正亲测确实获取不了 ...

  9. github for windows 安装失败解决方案(亲测)

    早之前就有接触github,也在公司机子上装过,一路下来挺顺畅的.夏老师还纳闷他的机子装不上,我说,有鬼! 然而时隔一个月自己再来装,却在自己的本本上遇到鬼了. 然而网上论坛收了一堆,各种试.果断放弃 ...

  10. VirtualBOX 虚拟机安装 OS X 10.9 Mavericks 及 Xcode 5,本人X220亲测

    原文链接:http://bbs.weiphone.com/read-htm-tid-7625465.html 建议电脑要求    Windows 7/8, 32 / 64 bit    CPU Int ...

随机推荐

  1. Android 7.0 Nougat牛轧糖 发布啦

    Android 7.0 Nougat牛轧糖 发布啦 Android 7.0 Nougat 牛轧糖于本月发布了. 从官方blog里可以了解到这个版本的新特性. Android 7.0 从2016年8月正 ...

  2. 9.PNG的制作

    1.背景自适应且不失真问题的存在 制作自适应背景图片是UI开发的一个广泛问题,也是界面设计师渴望解决的问题,我相信我们彼此都深有体会.       比如: 1.列表的背景图一定,但是列表的高度随着列表 ...

  3. UIView上的控件使用push方法跳转

    有时候在项目中,为了保持前后页面的推进方式跳转方式一致,会在通过UIview上的控件跳到另一个Controller上,所以,这时候就需要用到这种方式了,当然,present方法可以实现跳转但是样式可能 ...

  4. iOS App之间跳转

    1.先来看看效果,这里做了三个功能 从MyApp跳转到YourApp 从MyApp跳转到YourApp的指定页面 从YourApp使用跳转url的方式跳回MyApp 2.实现app之间的跳转需要注意两 ...

  5. Objective-C之KVC、KVO

    1,KVC(键值编码)  Key Value Coding 1.1在C#中,可以通过字符串反射来获取对象,从而对对象的属性进行读写,Object-C中有同样的实现,通过字符串(属性名词)对对象的属性进 ...

  6. mac maven

    下载Maven 下载地址 : https://maven.apache.org/download.cgi 解压zip包到指定目录 例如: /Users/Walid/Desktop/develop/to ...

  7. WPF 自定义的窗口拖动

    WPF原有的窗口样式太丑,当我们重新定义窗口时,则需要添加一些额外的功能,如拖动~ 1.在界面上对布局元素如Grid,添加委托事件: MouseLeftButtonDown="UIEleme ...

  8. Say goodbye to my photos&videos

    刚刚得知一个悲惨的消息:虽然2012已经过去了,但是世界末日并未过去.嗯,我不是来严肃的,我是来搞笑的.毕竟,我已经如此伤心了.中午结束考试,下午看了一半的电影然后躺室友的床上睡了一觉,醒来看到阿姨发 ...

  9. 又见SpringMVC

    一.如何让一个普通类成为Controller? 方案一:实现接口Controller解析:handleRequest(request,response) 方案二:继承AbstractControlle ...

  10. phoneGap+cordova+ionic混合app开发环境搭建

    参考链接:http://www.w2  bc.com/article/177257 待补充