1.unicode

unicode是字体在网页端最原始的应用方式,特点是:

  • 兼容性最好,支持ie6+,及所有现代浏览器。
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

unicode使用步骤如下:

第一步:拷贝项目下面生成的font-face

@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');//在iconfont前都需要填写URL
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}

第二步:定义使用iconfont的样式

.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: .2px;
-moz-osx-font-smoothing: grayscale;
}

第三步:挑选相应图标并获取字体编码,应用于页面

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

"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。

===================================================

2.font-class

 
 
 

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

 

与unicode使用方式相比,具有如下特点:

 
  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
 

使用步骤如下:

 

第一步:引入项目下面生成的fontclass代码:

 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
 

第二步:挑选相应图标并获取类名,应用于页面:

 
<i class="iconfont icon-xxx"></i>
 

"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。

 

====================================================

 

3.symbol引用

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:

 
  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。
 

使用步骤如下:

 

第一步:引入项目下面生成的symbol代码:

 
<script src="./iconfont.js"></script>

第二步:加入通用css代码(引入一次就行):

 
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -.15em;
fill: currentColor;
overflow: hidden;
}
</style>

第三步:挑选相应图标并获取类名,应用于页面:

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
 

以上总结来自http://www.iconfont.cn/

有个网站:http://fontawesome.dashgame.com/(

但注意head里面加这个<link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Font Awesome图标字体的更多相关文章

  1. Font Awesome图标字体应用及相关

    作为web开发者,难免要经常要用到些小图标,给自己web增添几分活力和多样性.像这些: 而Font Awesome刚好为我们提供了这些.到目前为止,Font Awesome提供了有500多个可缩放的的 ...

  2. Font Awesome:图标字体,完全CSS控制

    Font Awesome是一种web font,它包含了几乎所有常用的图标,比如Twitter.facebook等等.用户可以自定义这些图标字体,包括大小.颜色.阴影效果以及其它可以通过CSS控制的属 ...

  3. font awesome (图标字体库)

    Font Awesome fa是什么? 图标字体库和CSS框架 怎么用? <link rel="stylesheet" href="https://cdn.boot ...

  4. Font Awesome图标字体库(2015年05月25日)

    Font Awesome是一款非常棒的字体图标工具,给个地址,具体的自已慢慢去体会,只能帮你到这儿了...... http://fortawesome.github.io/Font-Awesome/ ...

  5. CSS网页使用Font Awesome图标字体时,css定义 content 属性

    原文地址: http://blog.csdn.net/laurel_y/article/details/70842157

  6. 01_MUI之Boilerplate中:HTML5示例,动态组件,自定义字体示例,自定义字体示例,图标字体示例

     1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...

  7. IconMoon图标字体制作

    官网:https://icomoon.io/ 点击右上角“IconMoon APP” 点击左上角“import Icons”按钮 选中小图标 - 选择右下角“Generate Font”生成图标字体 ...

  8. 01_MUI之Boilerplate中:HTML5演示样例,动态组件,自己定义字体演示样例,自己定义字体演示样例,图标字体演示样例

     1安装HBuilder5.0.0,安装后的界面截图例如以下: 2 依照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上 ...

  9. 如何应用Font Awesome矢量字体图标

    Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库.这套图标字体集几乎囊括了网页中可能用到的所有图标,除了包括 Twitter Boostrap 的默认图标外, ...

随机推荐

  1. PRML读书笔记——线性回归模型(上)

    本章开始学习第一个有监督学习模型--线性回归模型."线性"在这里的含义仅限定了模型必须是参数的线性函数.而正如我们接下来要看到的,线性回归模型可以是输入变量\(x\)的非线性函数. ...

  2. 关于serialVersionUID与序列化"

    java序列化trick and trap 厂内经常出现序列化对象版本不匹配问题,于是发本文说明一些序列化的注意点 调用MQ.memcached.rpc等等涉及到远程通讯的都会经过序列化,虽然客户端透 ...

  3. Python函数汇总(陆续更新中...)

    range的用法 函数原型:range(start, end, scan): 参数含义: start:计数从start开始.默认是从0开始.例如range(5)等价于range(0, 5); end: ...

  4. Python初学者第二十天 函数(3)-递归函数及练习题

    20day 1.递归的返回值: 递归返回值 2.递归的特性: a.必须有一个明确的结束条件 b.每次进入更深一层递归时,问题规模相比上次递归都应有所减少 c.递归效率不高,递归层次过多会导致栈溢出 3 ...

  5. 计算机支持的最大内存与CPU之间的关系

    在使用计算机时,其最大支持的内存是由  操作系统 和 硬件 两方面决定的. 先说一下硬件方面的因素,在计算机中 CPU的地址总线数目 决定了CPU 的 寻址 范围,这种由地址总线对应的地址称作为物理地 ...

  6. 沉淀再出发:java中的HashMap、ConcurrentHashMap和Hashtable的认识

    沉淀再出发:java中的HashMap.ConcurrentHashMap和Hashtable的认识 一.前言 很多知识在学习或者使用了之后总是会忘记的,但是如果把这些只是背后的原理理解了,并且记忆下 ...

  7. August 23rd 2017 Week 34th Wednesday

    Do not pray for easy lives. Pray to be stronger men. 不要祈祷舒适的生活,而是祈祷自己能变得更强大. It seems this quotation ...

  8. ZT 布列瑟农

    布列瑟农 编辑 <布列瑟农>(Bressanone)是加拿大环保音乐家马修·连恩(Matthew Lien)创作并演唱的一首经典歌曲,收录在他1995年的专辑<狼>(Bleed ...

  9. 利用describe( )中的count来检查数据是否缺省

    #-*- coding: utf-8 -*- #在python的pandas库中,只需要读入数据,然后使用describe()函数就可以查看数据的基本情况 import pandas as pd in ...

  10. 关于 Can't connect to MySQL server on 'localhost' (10061) 的一个解决方案

    问题描述: 使用Navicat for mysql 无法远程连接到本地数据库,提示Can't connect to MySQL server on 'localhost' (10038) . 本地服务 ...