Font Awesome 是专门为 Twitter Bootstrap 设计的一套图标字体库，它几乎囊括了网页中可能用到的所有图标，通过Web Font的方式来显示图标。

正如其官方网站上所说的：

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

好处就是图标可以任意缩放、改变颜色，你可以像修改文字样式那样修改图标样式，非常方便易用。

主要特色：

  • ✓  一种字体，302个图标，是网页操作的象形语言
  • ✓  纯 CSS 控制，能够轻松定义图标的颜色、大小、阴影以及任何 CSS 能够实现的效果
  • ✓  无限缩放，矢量图标在任何尺寸下都一模一样
  • ✓ 免费使用，包括商业和非商业项目
  • ✓ 支持 Internet Explorer 7 浏览器
  • ✓ 能够在 Retina 屏幕完美呈现
  • ✓ 完全兼容 Twitter Boostrap 最新版本
  • ✓ 对设计师友好，设计师能够轻松使用
  • ✓ 和其它图标字体不同，兼容屏幕阅读器

使用方法

使用 CSS：
1、拷贝 Font Awesome 字体目录到项目中；
2、拷贝 font-awesome.min.css 文件到项目中；
3、修改 font-awesome.min.css 文件中的字体路径到正确的位置；
4、在页面的 head 里引入 font-awesome.min.css 文件：

<link href=”../css/bootstrap.min.css” rel=”stylesheet” />
<link href=”../css/font-awesome.min.css” rel=”stylesheet” />

使用 LESS：
1、拷贝 Font Awesome 字体目录到你的项目中；
2、拷贝 font-awesome.less 文件到 bootstrap/less 目录。
3、打开 bootstrap.less 文件并替换 @import “sprites.less”; 为 @import “font-awesome.less”;
4、编辑 elusive-webfont.less 文件的 @FontAwesomePath 变量为字体路径：

@FontAwesomePath: "../font";

然后重新进行 LESS 编译就可以了。

另：Elusive Icons 也是一套网页字体图标，可用于任何项目，这套图标库目前包含283款圆滑的矢量图标
使用方法
使用 CSS 模式：
拷贝 Elusive Icons 字体目录到项目中；
拷贝 elusive-webfont.css 文件到项目中；
修改 elusive-webfont.css 文件中的字体路径到正确的位置（和LESS方式类似）；
在页面的 head 里引入 elusive-webfont.css 文件：

<link href=”../css/bootstrap.css” rel=”stylesheet” />
<link href=”../css/elusive-webfont.css” rel=”stylesheet” />

使用 LESS 模式：
拷贝 elusive-iconfont 目录到你的项目中；
拷贝 elusive-webfont.less 文件到 bootstrap/less 目录。
打开 bootstrap.less 文件并替换 @import “sprites.less”; 为 @import “elusive-webfont.less”;
编辑 elusive-webfont.less 文件，让字体路径指向正确的位置：

@font-face {
  font-family: 'Elusive-Icons';
  src:url('../font/Elusive-Icons.eot');
  src:url('../font/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
    url('../font/Elusive-Icons.svg#Elusive-Icons') format('svg'),
    url('../font/Elusive-Icons.woff') format('woff'),
    url('../font/Elusive-Icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

然后重新进行 LESS 编译就可以了。
项目地址：https://github.com/aristath/elusive-iconfont/