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";
}

相关文章推荐

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

:before/:after是伪元素,fontawesome 是在伪元素的content加入不同的Unicode 来渲染不同的图标的 可以放在content 里啊,直接放在 html里的那是字符...

字体图标 icon font

Icon font 简介、优缺点、相关资源、使用方法

IconFont 图标的3种引用方式

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

iconfont矢量图库的使用方法

该方法在引用图标时极其方便,节省了很多时间。

IconFont的使用方法

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

IconFont的使用方法

IconFont的作用就是用字体格式来取代图片、特殊字体的展示,用的比较多的就是一些纯色的图片,具体主要有当前CSS3属性里的自定义字体(@font-face)来实现。 1、先来说说它的优缺点:...

字体图标使用方法——以Iconfont为例

字体图标可以为前端工程和UI设计师提供一种方便高效的图标使用方式。而Iconfont是国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能,由阿里巴巴体验团队倾力打造...

几种使用Iconfont的方法

获取Iconfont: 百度搜索阿里巴巴矢量图标库,进入后,搜索自己需要的图标,并加入到购物车,最后添加到项目中。 如:我添加了5个我需要的图标 项目中 如何在自己的页面中使用以上图标...

Android 中使用IconFont 例子

  • 2015-03-18 12:24
  • 1.57MB
  • 下载

iconfont的使用

什么是iconfont iconfont是‘字体图标’,将图标以文字的方式显现的网页中。现在有很多网页已经使用过字体图标,如我们大家都熟知的淘宝、京东、新浪等大型网站都用到过字体图标。      ic...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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