一套绝佳的图标字体库和 CSS 框架

Hi！大家好呀！我是你们努力的喵哥！

在我们工作中或者做个人的小产品时，我们通常会使用很多图标来增强产品的视觉效果和易用性。大家常用的方法就是去阿里巴巴的 Iconfont 网站下载图标，然后嵌入到自己的产品当中。

但是 Iconfont 的图标对于个人或者公司作为商业用途时存在一些问题。Iconfont 如果需要商业使用，是需要联系平台获得商业授权的。同时，由于作者可以自由上传图标。这也是存在商业使用的风险的。

所以，喵哥今天就给大家推荐开源项目 Font Awesome。Font Awesome 是非常丰富的图标的矢量图标库，且还包含对应工具箱的 CSS 框架。Font Awesome 提供的图标可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

特点

一套字库, 675个图标

不需要 JavaScript 支持

       更少的兼容性问题，因为该字体不需要javascript。

无限的扩展性

       可缩放的矢量图形，每个图标在放大或者缩小的时候看起来都正常。

完全开源免费

       该字体是完全开源并且免费的。

CSS 控制

       可以轻松的用css来控制字体的颜色，大小，阴影等！

完美支持Retina屏幕

       字体是矢量图，这意味着在高分辨率下也会完美显示。

良好的兼容性

最初是为Bootstrap而设计的，现在Font Awesome适用于所有框架。

兼容桌面级应用

安装

使用 CSS

1. 复制 font-awesome 目录到你的项目中

2. 在 处加载font-awesome.min.css如下。

使用 Sass or Less

使用 LESS or SASS 来个性化自定义Font Awesome 4.7.0

1. 复制 font-awesome/ 目录到你的项目中。

2. 打开你项目中的 font-awesome/less/variables.less 或 font-awesome/scss/_variables.scss。

然后编辑 @fa-font-path 或 $fa-font-path 变量来指定字体目录。@fa-font-path:   "../font"。

字体的路径是相对于你CSS目录的。

3. 如果你使用一个静态编译器，请重新编译你的 LESS 或 SASS。

使用

基础图标

你可以通过设置CSS前缀fa和图标的具体名称，来把Font Awesome 图标放在任意位置。Font Awesome 被设计为用于行内元素（我们喜欢用更简短的标签，它的语义更加精准）。

fa-camera-retro

- 例如: 默认图标如果您修改了图标容器的字体大小，图标大小会随之改变。同样也适用于颜色，阴影，阴影等其它任何CSS支持的效果上。

大图标

为了增加图标大小相对于它们的容器, 使用 fa-lg (33% 递增), fa-2x, fa-3x, fa-4x, 或 fa-5x classes.

fa-lgfa-2xfa-3xfa-4xfa-5x

如果你的图标顶部和底部被裁剪掉，请确保你有足够的行高。

导航图标

使用 fa-fw 来设置图标在一个固定宽度内，主要用于不同宽度图标无法对齐的情况，尤其在列表或导航时起到重要作用。

    首页    关于我们    后台应用编辑    系统设置

列表图标

使用 fa-ul and fa-li 轻松的替换无序列表中的默认图标。

  
使用列表类图标  
轻松的替换  
无序列表  
中的默认图标

边框与内嵌图标

使用 fa-border 和 fa-pull-right 或 fa-pull-left 可以轻易构造出引用的特殊效果。

...独坐在路边街角 冷风吹醒，默默地伴着我的孤影，只想将结他紧抱，诉出辛酸，就在这刻想起往事，心中一股冲劲勇闯，抛开那现实没有顾虑，仿佛身边拥有一切，看似与别人筑起隔膜。

动画图标

使用 fa-spin 使任意图标旋转，还可以使用 fa-pulse 使其进行8方位旋转。尤其适合 fa-spinner, fa-refresh, 和 fa-cog。

Loading...

Loading...

Loading...

Loading...

Loading...

温馨提示: 动画图标会在一些平台的浏览器中出现抖动的效果，可参见 问题列表#671 中的例子来解决此问题。

图标旋转

若要对图标进行任意旋转和翻转, 可以使用 fa-rotate-* and fa-flip-* 类.

 normal
 fa-rotate-90
 fa-rotate-180
 fa-rotate-270
 fa-flip-horizontal
 fa-flip-vertical

组合图标

如果想要将多个图标组合起来，使用fa-stack类，作为父容器，fa-stack-1x作为正常比例的图标，fa-stack-2x作为大一些的图标。还可以使用fa-inverse类来切换图标颜色。您可以在父容器中 通过添加 larger icon 类来控制整体大小。

    fa-twitter on fa-square-o
    fa-flag on fa-circle
    fa-terminal on fa-square
    fa-ban on fa-camera

最后

Font Awesome 的作者是开源组织 FortAwesome。FortAwesome 旨在开发帮助大家做更好 Web 程序的工具。Font Awesome 开源在 Github 已三年多，共收获了 63.5k Star。Font Awesome 单单在 Github 就有8300多的使用者，是 Github 非常火热的项目。

项目地址：https://github.com/FortAwesome/Font-Awesome

在线文档：https://fontawesome.dashgame.com/