ICONFONT的使用方法

转载 2015年07月09日 19:37:55

1、先来说下它的优缺点:

优点:体积比图片小,可以变化大小和颜色,而图片则是不可以的;

缺点:由于是字体模式,所以只支持纯色,多颜色不支持。

2、该如何使用

  2.1、字体的格式,不同浏览器支持的字体格式是不一样的,具体如下:

  • webkit/safari:支持TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+支持.ttf,iOS 4.2以下只支持SVG字体;
  • Chrome:除webkit支持的以外,从Chrome 6开始,开始支持woff格式;
  • Firefox:支持.ttf和.otf,从Firefox 3.6开始支持woff格式;
  • Opera:支持.ttf、.otf、.svg。尚不支持woff Opera 11开始支持WOFF(多谢Apostle提醒~~);
  • IE:只支持eot格式,IE9开始支持woff。

  2.2、具体使用

  首先需要用字体软件(如FontCreator、FontLab)做好该字体,再用各种线上工具转换为各种字体格式:

几个格式的字体都转换好后,在css代码里用font-face定义该字体就可以。

html代码:

复制代码
<div class="box">
    <span  class="icon-home"></span>
    &nbsp;icon-home
</div>
<div class="box">
    <span  class="icon-home-2"></span>
    &nbsp;icon-home
</div>
复制代码

css代码:

复制代码
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot');/**IE9**/
    src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),/**IE6-IE8**/
        url('fonts/icomoon.svg#icomoon') format('svg'),/** iOS 4.1-**/
        url('fonts/icomoon.woff') format('woff'),/**chrome、firefox**/
        url('fonts/icomoon.ttf') format('truetype');/**chrome、firefox、opera、Safari, Android, iOS 4.2+**/
    font-weight: normal;
    font-style: normal;
}

.box span{
  color:#ff0;
  font-size:20px; 
  font-family: 'icomoon'; /**引入font-face定义的字体名称**/      
}
/*content里的数值就是iconfont图标里对应的数值*/
.icon-home:before {
    content: "\21";
}
.icon-home-2:before {
    content: "\23";
}

iconfont使用简易教程

因为自己的项目中需要使用图标,而本人不擅长前端。因此了解到阿里的iconfont矢量图标是一个不错的图标库。下文介绍最简易,通用的使用图标方式以便参考。 1、  寻找适用的图标 官方网址:http:/...
  • paditang
  • paditang
  • 2017年04月12日 11:33
  • 3312

伪类after before如何使用阿里的iconfont字体

之前在做一个蛋糕项目的时候,设计给了我一个这样的图片(tips:[ “ \e60d”为蛋糕的小图标 ]) 当中的蛋糕图标,我的第一反应就是用before去做。然后把iconfont图标的十六...
  • u011456552
  • u011456552
  • 2016年10月31日 12:23
  • 1432

:before/:after里iconfont的使用方法

:before/:after是伪元素,fontawesome 是在伪元素的content加入不同的Unicode 来渲染不同的图标的 可以放在content 里啊,直接放在 html里的那是字符...
  • u014608930
  • u014608930
  • 2016年12月30日 10:09
  • 1087

IconFont 图标的3种引用方式

新版Iconfont-阿里巴巴矢量图标库支持三种引用方式: 1.unicode引用(原始) 2.font-class引用(unicode引用的升级,淘宝首页正在使用,2016.12.24) 3.sym...
  • QQ80583600
  • QQ80583600
  • 2017年03月14日 22:06
  • 6742

Iconfont图标使用-打造自己项目下…

现在很流行的前台模板采用的一般是bootstrap,font awesome(图标字体),经常会遇见的问题是缺少定制版的图标,其中有很多原因,一部分是由于font awesome是外国的图标方式,上面...
  • wh2691259
  • wh2691259
  • 2016年08月17日 17:48
  • 8067

IconFont的使用方法

IconFont的作用就是用字体的格式来取代图片、特殊字体的展示,用得比较多的就是一些纯色的图标,具体主要由当前css3属性里的自定义字体(@font-face)来实现。 1、先来说下它的优缺点...
  • u013941515
  • u013941515
  • 2014年07月18日 19:43
  • 4173

iconfont使用简易教程

因为自己的项目中需要使用图标,而本人不擅长前端。因此了解到阿里的iconfont矢量图标是一个不错的图标库。下文介绍最简易,通用的使用图标方式以便参考。 1、  寻找适用的图标 官方网址:http:/...
  • paditang
  • paditang
  • 2017年04月12日 11:33
  • 3312

iconfont引用方法

前端小白进阶路 页面对于小图标的需求 除了精灵图片可以满足后也可以引用阿里巴巴的矢量图标库 而且引用图标库感觉效率更高 而且可以让设计师偷懒哈哈 下面开始介绍教程,其实网上已经很多 但是感觉有一...
  • weixin_37585123
  • weixin_37585123
  • 2017年04月09日 00:34
  • 485

iconfont的使用

什么是iconfont iconfont是‘字体图标’,将图标以文字的方式显现的网页中。现在有很多网页已经使用过字体图标,如我们大家都熟知的淘宝、京东、新浪等大型网站都用到过字体图标。      ic...
  • qq_26465813
  • qq_26465813
  • 2017年03月28日 10:51
  • 711

【Android 进阶】Iconfont 图标的使用以及自定义

Iconfont 图标的使用
  • leaf_130
  • leaf_130
  • 2017年05月12日 14:24
  • 916
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ICONFONT的使用方法
举报原因:
原因补充:

(最多只允许输入30个字)