在网站或桌面应用使用Font Awesome图标库

Font Awesome介绍

Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。

一个字库，675个图标

仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。

无需依赖JavaScript

Font Awesome完全不依赖JavaScript，因此无需担心兼容性。

无限缩放

无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。

如言语一般自由

Font Awesome完全免费，哪怕是商业用途。请查看许可。

CSS控制

只要CSS支持，无论颜色、大小、阴影或者其它任何效果，都可以轻易展现。

高分屏完美呈现

Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。

完美兼容其它框架

尽管是为Bootstrap设计，但Font Awesome同样能与其它框架完美协同运作。

可用于桌面系统

用于桌面系统，或需要一套完整的矢量图，请查看备忘。

可适配于屏幕阅读器

与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。

背景

网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。下面的小图标，你是不是会经常用到？

你可能说——“我们用的都是彩色的，不是黑白的”——别着急，下面会讲到。因为它们也可以变为彩色的。

黑白的也好，彩色的也罢，如果用传统的“css + 图片”的方式来制作这些icon，我估计你至少得雇佣一个专业的设计师吧。一般的程序猿，包括前端程序猿，估计只能去搜索了，不会自己拿ps画。

但是问题又来了，如果你搜索来的是黑白的，现在也用黑白的，后期网站变化主题怎么办？你搜出来的是16 * 16的，要有个页面需要 32 * 32的怎么办？如果沿着这个方向考虑，你会发现，自己将在这上面耗费大量资源和精力。

但是如果我告诉你，有一个东西，它已经为你准备了非常多的常用icon图标（还在不断更新），能大能小，能随便修改颜色，完全开源，完全免费，你会不会心动？如果你非常着急，先去百度一下“font-awesome”，再来继续读文章不迟。

font-awesome原理：

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，下面将详细讲解这种用法。

为什么要将icon做成字体？

在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 index透明等。

比如，twitter用到的各种小icon：

这种情况下，使用字体来实现图标就有很多优势：

字体文件小，一般20-50kb； 容易编辑和维护，尺寸和颜色可以用css来控制； 透明完全兼容IE6； 如何将icon变成字体？

最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。

我们要用到一些字体编辑软件，比如FontCreator、FontLab等，这里我们用FontLab来演示。

还原步骤很简单：

PSD–>eps–>FontLab，即将PSD转换为illustrator的eps格式，然后将某个字符复制到FontLab中即可。

具体步骤：

打开设计稿psd，将其保存为Photoshop eps格式，我们这里以Qzone中说说发表框的表情icon为例：

在illustrator中打开保存的eps文件：

取消分组，然后点选某个icon，复制。

打开FontLab，随便打开一款字体文件，比如tahoma.ttf：

然后双击某个字符，将原有图形删除，粘贴刚才复制的icon对象：

调整图形大小，一个icon就完成还原了。

就是这么简单。所有icon还原完之后，生成字体文件就可以了。

查看字体对应字符，可以在字体列表中，在某个字体上右键查看属性(快捷键Alt+Enter)，查看该字体对应的字符：

可以看到字体对应的字符是i，unicode编码是0069。

字体格式的浏览器支持：

目前，各个浏览器对字体格式的支持是最大的区别：

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。

注：woff是最新的web开放字体格式(web open font format)，w3c推荐，主要优势是针对浏览器进行优化，字体文件小。详情可查看wiki：

在CSS中使用icon字体：

先使用font-face声明字体：

代码如下:

@font-face { 
font-family: 'emotion'; 
src: url('emotion.eot'); /* IE9*/ 
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('emotion.woff') format('woff'), /* chrome、firefox */ 
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ 
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */ 
} 

然后，在icon元素上使用该字体就好了： 代码如下:

.icon{font-family:"emotion" Tahoma; 
... 
} 

最后，在页面中使用这个字体：

代码如下:

<span class="icon">i</span> 

支持CSS3的浏览器可以更上流一点儿，我们每次修改html可能没那么方便，如果要改变某个icon，则可能需要修改相关字符，比如将i修改为e等。如果使用css3的伪元素，可以方便很多：

代码如下:

.icon{ 
display:inline-block; 
width:16px; 
height:16px;/*占个位**/ 
... 
} 
.icon:after,.icon::after{ 
font-family:"emotion" Tahoma; 
display:inline-block; 
content:"i";/*在这里调用字符*/ 
width:16px; 
height:16px; 
margin-left:-16px;/*position:absolute什么的也可以，看具体情况*/ 
} 

嗯，就是用实际元素占位，用伪元素+content属性显示icon，然后覆盖到实际元素上面，之后我们修改某个icon只需要更改css样式就可以了。

其实，这种方法有一个不足，就是只支持纯色icon，最多能高端浏览器上实现渐变色或图形蒙板。 当然，我们有很多场景是用纯色icon，特别是在Windows 8这种Metro UI开始越来越多的时候。 另外，这种方法可以有效减少页面的请求，但是对于习惯使用CSSGaGa的auto sprite功能的同学来说，这种方法对页面性能的提升不大。 但是对于移动终端，特别是webapp中，这种方法还是有很大的用武之地的，可以很方便的兼容多分辨率，配合离线存储效果更佳。 如果你有这方面更好的建议和意见，欢迎提出。

网页中应用font-awesome：

去官网下载，解压之后，应该能看到“css”和“font”两个文件夹。css文件夹中存放着css文档，font文件夹中存放在着适用于不同浏览器的字体文件。其中，css文件夹中可以只保留 font-awesome.min.css 和 font-awesome-ie7.min.css 两个文档，其他的可以删掉。结构应该如下：

2.2 简单应用

将整理好的文件夹加入到你的网站，新建一个测试页面 demo.html，将css文件夹中的两个css文件，引入到页面。

<link href="fontawesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" /><!--[if IE]>
<link href="fontawesome-4.2.0/css/font-awesome-ie7.min.css" rel="stylesheet" />
<![endif]-->

如上图，如果是IE浏览器，需要引入 font-awesome-ie7.min.css ，因为fontAwesome支持IE7+浏览器的。（唉。。为何不再往前延伸到支持IE6呢。。。）

引用CSS文件之后，接下来就可以使用图标了。例如，我要在页面中显示一个“链接”的图标，我可以这么写：

<span><i class="fa fa-link"></i> 链接</span>

此时页面将显示：

显示是显示出来了，那么对应链接的这个css类“fa-link”我是从哪里找来的呢？

答案非常简单！进入官网的icon页面，里面有所有的icon的css类，就可以找到你想要的那个图标的css类了。

（注意，在“fa-link”前面还要加入一个“fa”类，例如 <i class="fa fa-link">）

2.3 设置大小和颜色

学会了以上的简单使用，设置颜色和大小非常简单，只要你会用css设置文字的颜色和大小就行。直接看代码：

<span style="font-size:12px;"><i class="fa fa-link"></i> 链接</span><br /><span style="font-size:20px;"><i class="fa fa-link"></i> 链接</span><br /><span style="color:red"><i class="fa fa-link"></i> 链接</span><br /><span style="color:white;background-color:#003399;"><i class="fa fa-link"></i> 链接</span>

得出的结果就是：

so easy 吧！这样看来它确实是个好东西。

2.4 其他应用

fontAwesome还有其他更加复杂一点的应用，包括固定宽度、浮动、反转、旋转、叠加图标等。

官网上讲解的更好，我就不再这里重复描述了，可以去http://www.fontawesome.com.cn/get-started/查阅这些应用的例子。

在WPF中使用FontAwesome之类的字体图标

在WPF程序中，一般接触到的矢量图标资源有XAML、SVG、字体这三种格式。XAML是标准格式就不说了，SVG并不是直接支持的，不过微软提供了Expression Design可以非常方便我们将其转换为XAML格式的资源。而对于字体，虽然WPF是直接支持的，但由于字体图标其特殊性，要将其显示为图标还是需要费点劲的。本文这里就以Font-Awesome为例，介绍一下如何在WPF中使用字体图标。

首先添加一个样式，为了使用方便，建议直接做为全局样式：

 <Style x:Key="FontAwesome" >
 <Setter Property="TextElement.FontFamily" Value="pack://application:,,,/Resource/#FontAwesome" />
 <Setter Property="TextElement.FontSize" Value="14" />
 </Style>

请注意我这里的FontFamily的设置，我是采用的嵌入字体的方式，这样在没有装该字体的机器上也是能正确显示图标的。

然后就可以直接使用该样式了：

 <Grid>
 <TextBlock Text="&#xf0c2;"Style="{StaticResource FontAwesome}" Foreground="Blue"
 VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="22"/>
 </Grid>

运行后可以得到如下图标了：

原理并不复杂，将TextBlock的Text设置为图标对应的文字，设置其FontFamily为FontAwesome即可。但这里有一个小的知识点就是：一般来说，fortawesome之类的图标字体中图标对应的文字都是不可以通过输入法直接输入的，只能直接输入Unicode编码，WPF在XAML中使用Unicode编码输入的方式和HTML是一样的，例如0xf0c2就对应为"&#xf0c2;" 。

除了TextBlock外，我这里写的样式可以应用于任何支持字体显示的控件的：

 <StackPanel>
 <Label Content="&#xf0c2;" Style="{StaticResource FontAwesome}" />
 <Button Content="&#xf0c2;" Style="{StaticResource FontAwesome}"/>
 <ContentControl Content="&#xf0c2;" Style="{StaticResource FontAwesome}"/>
 </StackPanel>

运行后效果如下：

最后一个问题就是如何找到我们的图标和对应的Unicode编码了，虽然可以通过安装字体后通过字符映射表查询，但是这样只能看到图形，而我们更希望先根据文字描述找图形，再根据图形找对应的十六进制值。好在一般那些字体图标网站上都列举了其对应关系的。对于fortawesome字体，直接访如下网页即可：http://fortawesome.github.io/Font-Awesome/cheatsheet/

或者，也可以使用我这里写的一个XAML扩展，将Font-awsome的字体转换了为枚举。这样可以在代码中使用名字了，程序可读性要好得多。

    class FontValueMarkupExtension : MarkupExtension
    {        public FontDescription Font { get; set; }        public override object ProvideValue(IServiceProvider serviceProvider)
        {            var charactor = typeof(FontDescription).GetField(Font.ToString())
                                .GetCustomAttribute<CharAttribute>()
                                .Value;            return charactor.ToString();
        }
    }


    [AttributeUsage(AttributeTargets.Field)]    sealed class CharAttribute : Attribute
    {        public char Value { get; private set; }        public CharAttribute(char value)
        {            this.Value = value;
        }
    }    enum FontDescription
    {

        [Char('\uf1eb')]
        Wifi,

        [Char('\uf17a')]
        Windows,

        [Char('\uf159')]
        Won,

        [Char('\uf19a')]
        Wordpress,

        [Char('\uf0ad')]
        Wrench,

        [Char('\uf168')]
        Xing,

        [Char('\uf169')]
        XingSquare,

        [Char('\uf19e')]
        Yahoo,

        [Char('\uf1e9')]
        Yelp,

        [Char('\uf157')]
        Yen,

        [Char('\uf167')]
        Youtube,

        [Char('\uf16a')]
        YoutubePlay,

        [Char('\uf166')]
        YoutubeSquare,
    }

另外的一个好处是可以使用VisualStudio的智能提示功能了。

虽然这样也比较方便，但XAML中的智能提示没有代码中那么强大（只输入后面的部分大部分情况下提示不出来），另外感觉还是没有一个总体的视图，许多时候还是得看看上面的那个网页。