当前各个浏览器都支持CSS3的自定义字体(@font-face)，利用font-face我们可以将网页中常用到的各种小图标统一制作成字体，这样不仅文件字体很小，容易通过css来控制图标大小和颜色。

那么如何将icon变成字体呢？

最关键的是要将设计稿中的icon(要有矢量路径，位图没法转化)完美还原成字体，这并不是很麻烦。 我们要用到一些字体编辑软件，比如FontCreator、FontLab等，这里我们用FontLab来演示。 还原步骤很简单： PSD–>eps–>FontLab，即将PSD转换为illustrator的eps格式，然后将某个字符复制到FontLab中即可。 具体步骤请查看CSS3 icon font完全指南

在css中使用icon字体

先使用font-face声明字体：

1
2
3
4
5
6
7
8

@font-face {
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
    src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
    url(../fonts/glyphicons-halflings-regular.woff) format('woff'),
    url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),
    url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')
}

在需要使用的地方自定义class

1

.icon{font-family:"Glyphicons Halflings";}

然后在页面中使用样式即可。

目前可以使用的免费字体资源

Font Awesome 为配合Twitter Bootstrap使用而设计。其实它是Glyphish的一个免费的重新设计的版本。 Modern Pictograms (89个) 可以在Font Squirrel免费下载 Erler Dingbats Ecqlipse 2(281个) Heydings Icons(60个) Iconic(171个) Web Symbols(~80个) Entypo(100+个) 更多请查看 The Big List of Flat Icons & Icon Fonts

在线免费制作Font

fontello提供一些免费的字体，并且允许你挑选你需要的图标然后生成你自定义的字体文件 icomoon – 类似fontello，从一系列的svg字体文件生成一个字体文件；