今天给大家推荐一套绝佳的图标字体库，使用起来非常简单方便。下面我们来一起看看：
Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。
a.一套字库, 675个图标
FontAwesome是一种带有网页功能的象形文字语言，并收集在一个集合里。
b.不需要 JavaScript 支持
更少的兼容性问题，因为该字体不需要javascript
c.无限的扩展性
可缩放的矢量图形，每个图标在放大或者缩小的时候看起来都正常
d.完全开源免费
该字体是完全开源并且免费的，查看许可证
e.CSS 控制
可以轻松的用css来控制字体的颜色，大小，阴影等！
f.完美支持Retina屏幕
字体是矢量图，这意味着在高分辨率下也会完美显示。
g.良好的兼容性
最初是为Bootstrap而设计的，现在Font Awesome适用于所有框架。
h.兼容桌面级应用
如果你需要用于桌面软件设计或一套完整的矢量图，请访问“http://www.fontawesome.com.cn/cheatsheet/”.
i.兼顾可访问性
与其它字体不同，Font Awesome不会影响屏幕阅读器正常工作。
接下来说一下使用方法：
1.最简单的方式：BootstrapCDN （由MaxCDN提供）
将以下代码粘贴到网页HTML代码的 <head> 部分.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
demo:
<i class="fa fa-camera-retro"></i> fa-camera-retro
2.使用默认CSS
① 复制整个 font-awesome 文件夹到您的项目中。
② 在HTML的 <head> 中引用font-awesome.min.css。
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
demo：
使用 fa-lg (33%递增)、fa-2x、 fa-3x、fa-4x，或者 fa-5x 类 来放大图标。
<i class="fa fa-camera-retro fa-lg"></i>fa-lg
<i class="fa fa-camera-retro fa-2x"></i>fa-2x
<i class="fa fa-camera-retro fa-3x"></i>fa-3x
<i class="fa fa-camera-retro fa-4x"></i>fa-4x
<i class="fa fa-camera-retro fa-5x"></i>fa-5x
3.LESS Ruby Gem
使用 官方 Font Awesome LESS Ruby Gem 可以简单方便的将 Font Awesome LESS 集成到Rails项目中。由 @supercodepoet 维护。
①将下面这行代码加入到应用的Gemfile中：
gem 'font-awesome-less'
②然后执行：
$ bundle
③或者自行安装：
$ gem install font-awesome-less
4.SASS Ruby Gem
使用 官方 Font Awesome SASS Ruby Gem 可以简单方便的将 Font Awesome SASS 集成到Rails项目中。由 @supercodepoet 维护。
①将下面这行代码加入到应用的Gemfile中：
gem 'font-awesome-sass'
②然后执行：
$ bundle
③或者自行安装：
$ gem install font-awesome-sass
5.进阶方式：自定义 LESS 或 SASS
使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。
①复制 font-awesome/ 目录到您的项目中。
②打开 font-awesome/less/variables.less 文件或 font-awesome/scss/_variables.scss文件 ，然后修改 @fa-font-path 或 $fa-font-path 为您的字体目录。
@fa-font-path: "../font";
如果使用了静态编译器，那么重新编译LESS或SASS文件。如果没有，那么现在应该一切OK了。
具体的详解实例可以官网查询。
网友评论