Get Started

轻松的在你网站上使用Font Awesome 4.7.0

#下载和定制

想自己管理和托管 Font Awesome 资产吗? 您可以手动下载、自定义和使用图标和默认样式。 包括 CSS 和 CSS 预处理器(Sass 和 Less)格式。

#使用 CSS

  • 复制 font-awesome 目录到你的项目中
  • <head>处加载font-awesome.min.css如下。
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  • 查看 案例 以获取 Font Awesome 的使用方法。

#使用 Sass or Less

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

  • 复制 font-awesome/ 目录到你的项目中。
  • 打开你项目中的 font-awesome/less/variables.lessfont-awesome/scss/_variables.scss 然后编辑 @fa-font-path$fa-font-path 变量来指定字体目录。
    /*字体的路径是相对于你CSS目录的。*/
    @fa-font-path:   "../font";
  • 如果你使用一个静态编译器,请重新编译你的 LESSSASS。
  • 查看 案例 以获取 Font Awesome 的使用方法。

#高级和套餐

LESS Ruby Gem 使用官方 Font Awesome LESS Ruby Gem 可以轻松地将 Font Awesome LESS 引入 Rails 项目。 由@supercodepoet 慷慨维护。

  1. 将此行添加到应用程序的 Gemfile 中: gem 'font-awesome-less'
  2. 然后执行: $ bundle
  3. 或者自己安装: $ gem install font-awesome-less

如果您使用 Rails,请将其添加到您的例如 application.scss

@import "font-awesome-sprockets";
@import "font-awesome";

#更多信息

#Validators

为了向旧的和有缺陷的浏览器提供最佳体验,Font Awesome 在多个地方使用 CSS 浏览器 hack 将特殊 CSS 定位到某些浏览器版本,以解决浏览器本身的缺陷。 这些 hack 可以理解地导致 CSS 验证器抱怨它们无效。 在一些地方,我们还使用了尚未完全标准化的前沿 CSS 功能,但这些功能纯粹用于渐进式增强。 这些验证警告在实践中并不重要,因为我们 CSS 的非 hacky 部分确实完全验证并且 hacky 部分不会干扰非 hacky 部分的正常运行,因此我们故意忽略这些特定警告。

#Internet Explorer 8 and @font-face

当与 :before 结合使用时,IE8 对 @font-face 有一些问题。 Font Awesome 使用该组合。 如果页面被缓存,并且在没有鼠标悬停在窗口上的情况下加载(即点击刷新按钮或在 iframe 中加载内容),则页面在字体加载之前呈现。 将鼠标悬停在页面(正文)上会显示一些图标,将鼠标悬停在其余图标上也会显示这些图标。 有关详细信息,请参阅问题 #954。

#Need IE7 Support?

当与 :before 结合使用时,IE8 对 @font-face 有一些问题。 Font Awesome 使用该组合。 如果页面被缓存,并且在没有鼠标悬停在窗口上的情况下加载(即点击刷新按钮或在 iframe 中加载内容),则页面在字体加载之前呈现。 将鼠标悬停在页面(正文)上会显示一些图标,将鼠标悬停在其余图标上也会显示这些图标。 有关详细信息,请参阅问题 #954。