Font Awesome

  开始使用

轻松将Font Awesome 4.7.0发布到您的网站

Font Awesome CDN方式引入 极其简单

Font Awesome CDN 是在您的网站上显示字体库的最简单方法，所有只有一行代码。没有下载或安装！ 

<!-- 版本：4.7.0-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- 版本：5.15.4-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css">

<!-- 版本：6.2.0-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.0/css/fontawesome.min.css">
or

下载与定制 简单方式

想自己管理和托管字体库吗？你可以下载, 自定义并手动使用图标和默认样式。包括CSS和CSS预处理器（Sass和Less）格式。

下载

使用 CSS

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

使用 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。
  4. 查看 案例 以获取 Font Awesome 的使用方法。
or

高级和软件包 专业

Less Ruby Gem

使用官方字体Awesome Less Ruby Gem轻松将字体Awestome Less导入Rails项目。由@SuperDepot慷慨维护。

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

如果您使用Rails，请将其添加到您的示例. application.less: 

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

Sass Ruby Gem

使用官方字体Awesome Sass Ruby Gem轻松将字体Awestome Sass放入Rails或Compass项目。由@SuperDepot慷慨维护。

  1. 将该行添加到应用程序的Gemfile中: 
    gem 'font-awesome-sass'
  2. 执行: 
    $ bundle
  3. Or install it yourself as: 
    $ gem install font-awesome-sass

自行安装 application.scss: 

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

更多信息

验证器

为了给老的和有缺陷的浏览器提供最好的体验，Font Awesome在几个地方使用CSS浏览器黑客，针对特定浏览器版本的特殊CSS，以解决浏览器本身的缺陷。可以理解，这些黑客行为导致CSS验证器抱怨它们无效。在一些地方，我们还使用了尚未完全标准化的前沿CSS功能，但这些功能纯粹用于渐进增强。

这些验证警告在实践中并不重要，因为我们的CSS的非黑客部分完全验证，黑客部分不会干扰非黑客部分的正常功能，因此我们故意忽略这些特定警告。

IE 8 and @font-face

IE8在@font-face 与:before组合时存在一些问题。字体真棒使用了这种组合。如果页面被缓存，并在没有鼠标在窗口上的情况下加载（即点击刷新按钮或加载iframe中的内容），则页面将在字体加载之前呈现。将鼠标悬停在页面（主体）上会显示一些图标，将鼠标悬停留在其余图标上也会显示这些图标。详见第954期。

Getting started - Internet Explorer 8 and @font-face by Bootstrap Team is licensed under CC BY 3.0

需要支持 IE7 ?

如果你需要IE7支持，我向你表示慰问。真正地Font Awesome 4.7.0不支持IE7，但旧版本支持。您需要查看3.2.1使用IE7的说明。然后向决定您的项目需要IE7支持的人投诉。

Troubleshooting

If you're having trouble with Font Awesome, make sure to check out the troubleshooting wiki page. Generously maintained by @gtagliala.