Rails：使用 Font Awesome答案

【问题标题】：Rails: Using Font AwesomeRails：使用 Font Awesome
【发布时间】：2012-06-18 15:00:38
【问题描述】：

我的网页设计师为我提供了已添加到字体真棒的更新字体/图标 - 他将其放置在本地字体文件夹中。我还得到了一个 font-awesome.css 文件。

我将字体文件夹直接复制到我的资产中，并将 font-awesome.css 放入资产/样式表中。

我的代码中正确引用了 css，但字体文件夹中的任何图标都没有加载。

我需要做些什么来确保正确加载所有内容和/或引用字体文件夹吗？

【问题讨论】：

您能否发布一些代码和/或链接到存在问题的位置？

标签： ruby-on-rails fonts font-awesome

【解决方案1】：

首先：将 app/assets/fonts 添加到资产路径 (config/application.rb)

config.assets.paths << Rails.root.join("app", "assets", "fonts")

然后将字体文件移动到 /assets/fonts（先创建文件夹）

现在将 font-awesome.css 重命名为 font-awesome.css.scss.erb 并像这样编辑它：改变：

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome')    format('svg');
  font-weight: normal;
  font-style: normal;
}

到这里：

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path("fontawesome-webfont.eot") %>');
  src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('eot'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#FontAwesome" %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

最后：检查所有资源是否正确加载（使用 Firebug 或 Chrome Inspector）

【讨论】：

也对我有用，但需要注意的是，我不能在同一个文件上同时使用 SASS 和 ERB。我不确定 Rails 是否可以对这样的文件进行双重预处理。但它不需要通过 SASS 运行，所以只需执行 font-awesome.css.erb 对我有用。谢谢！
使用 Rails 3.2.11，这可以正常工作。很好的答案！
别忘了重启服务器(:
注意src的第二行其实很长。您需要更改它们中的每一个并且不要将它们拆分为多个src 行。实际上，使用font_url 和scss 的另一个答案也可以使用并且更简洁。

【解决方案2】：

我尝试过 vicoar's ，但它不适用于我基于 ruby 1.9.3 和 rails 3.2 的项目。然后我将文件名font-awesome.css 重命名为font-awesome.css.erb 并将@font-face 更改为：

@font-face {
  font-family: "FontAwesome";
  src: url(<%= asset_path 'fontawesome-webfont.eot' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot' + '?#iefix' %>) format('eot'), url(<%= asset_path 'fontawesome-webfont.woff' %>) format('woff'), url(<%= asset_path 'fontawesome-webfont.ttf' %>) format('truetype'), url(<%= asset_path 'fontawesome-webfont.svg' + '#FontAwesome' %>) format('svg');
  font-weight: normal;
  font-style: normal;
}

效果很好，代码也很简单……（可以参考指南asset_pipeline

【讨论】：

【解决方案3】：

现在有一种更简单的方法，只需将 gem "font-awesome-rails" 添加到您的 Gemfile 并运行 bundle install.

然后在你的 application.css 中，包含 css 文件：

/*
 *= require font-awesome
 */

它会自动将 font-awesome 包含在您的资产管道中。完毕。开始使用吧:)

更多信息，请查看font-awesome-rails documentation。

【讨论】：

font-awesome-sass 怎么样fortawesome.github.io/Font-Awesome/get-started
我正在尝试这样做，但没有在我的样式表资产下生成任何文件
不，资产文件在 gem 中。
但是在执行上面建议的操作后图标没有加载，当我尝试使用 CDN 进行字体真棒时，同时将代码推送到 heroku 我收到另一个错误远程：Sass： :SyntaxError: 未定义变量：“$fa-css-prefix”。
您应该在另一个问题中提出这个问题。这太具体，信息太少，无法提供帮助。

【解决方案4】：

对于 rails 3.2.* 一个快速的解决方案：

1) 将字体真棒文件放在公共文件夹中的“字体”文件夹中 2) 打开 font-awesome.css 并将文件顶部的“../fonts” 4 个条目更改为“/fonts”

@font-face
{
     font-family:'FontAwesome';
     src:url('/fonts/fontawesome-webfont.eot?v=3.2.1');
     src:url('/fonts/fontawesome-webfont.eot?#iefix&v=3.2.1') 
     format('embedded-opentype'),url('/fonts/fontawesome-webfont.woff?v=3.2.1') 
     format('woff'),url('/fonts/fontawesome-webfont.ttf?v=3.2.1') 
     format('truetype'),url('../fonts/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') 
     format('svg');
     font-weight:normal;
     font-style:normal;
}
[class^="icon-"],[class*=" icon-"]
{
     font-family:FontAwesome;
     font-weight:normal;
     font-style:normal;
     text-decoration:inherit;
     -webkit-font-smoothing:antialiased;
     *margin-right:.3em;
}

【讨论】：

【解决方案5】：

我提供了另一个答案，在这个答案中，您不必担心宝石或路径或任何那些矫枉过正的解决方案。只需将此行粘贴到您的 application.html.erb （或您的布局文件中的任何文件）中

<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>

【讨论】：

谢谢！！这很奏效，经过数小时与“font-awesome-sass”宝石的斗争，在生产中无济于事。顺便说一句，我安装了 gem，没有看到任何副作用；不确定 gem 是否在做任何事情，但有足够的时间浪费在应该“正常工作”的事情上。
它可能什么都不做，你想清理它，对于任何 Rails 项目来说，更少的 gem 总是一件好事。

【解决方案6】：

除了 Vicoar 的回答

对于 Rails 4，您必须稍微改变 CSS。注意font_url的用法：

@font-face {
  font-family: "FontAwesome";
  src: font_url('fontawesome-webfont.eot');
  src: font_url('fontawesome-webfont.eot?#iefix') format('eot'), font_url('fontawesome-webfont.woff') format('woff'), font_url('fontawesome-webfont.ttf') format('truetype'), font_url('fontawesome-webfont.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

【讨论】：

刚刚意识到为什么很棒的字体 gem 不起作用，我从我的应用程序页面中删除了 applications.css 引用。现在我重新插入它，它开始工作了。所以要去那个解决方案，因为它看起来更干净
最后。这次只花了我一个小时。如果我可以安装 font-awesome-rails 并完成，那就太好了。没有。

【解决方案7】：

现在，以下方式是将 Font Awesome 与 Rails 集成的最简单方法：

SASS 红宝石宝石

使用官方 Font Awesome SASS Ruby Gem 轻松将 Font Awesome SASS 导入 Rails 项目。

将此行添加到应用程序的 Gemfile：

gem 'font-awesome-sass'

然后执行：

$ bundle

将此添加到您的 Application.scss：

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

【讨论】：

【解决方案8】：

刚刚使用 Rails 5.2 完成了这个，如果你不想使用 the font-awesome-rails gem，我想分享一下它是如何工作的：

将 FontAwesome 字体文件（EOT、WOFF 等）放在 /app/assets、/vendor/assets 或 / 的适当命名的子文件夹中lib/assets，例如：/app/assets/fonts。
将此行添加到 config/initializers/assets.rb:

Rails.application.config.assets.paths
将 FontAwesome 的 all.css 重命名为 all.scss。如果不这样做，Rails 将不会在下一步中预处理路径引用。
将字体文件的所有路径替换为 Rails 管道引用（即font-url 或 asset-url）：

例如。之前

@font-face { font-family: 'Font Awesome 5 Free'; 字体样式：正常；字体粗细：900； src: url("../webfonts/fa-solid-900.eot"); src: url("../webfonts/fa-solid-900.eot?#iefix") 格式("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") 格式( “woff2”），url（“../webfonts/fa-solid-900.woff”）格式（“woff”），url（“../webfonts/fa-solid-900.ttf”）格式（“truetype” "), url("../webfonts/fa-solid-900.svg#fontawesome") 格式("svg"); }

例如。之后

@font-face { font-family: 'Font Awesome 5 Free'; 字体样式：正常；字体粗细：900； src:asset-url("fa-solid-900.eot"); src:asset-url("fa-solid-900.eot?#iefix") format("embedded-opentype"),asset-url("fa-solid-900.woff2") format("woff2"),asset -url("fa-solid-900.woff") 格式("woff")、asset-url("fa-solid-900.ttf") 格式("truetype")、asset-url("fa-solid- 900.svg#fontawesome") 格式("svg"); }
重启服务器。

【讨论】：

【解决方案9】：

如何将 font-awesome 4 与准系统 Rails 6 和 Webpacker 一起使用，无需任何额外的 gem，将字体或 css 文件复制粘贴到您的应用程序中并做其他奇怪的事情：

添加 font-awesome npm 包 — 包.json：

{
  "dependencies": {
    "font-awesome": "4.7.0"
  }
}

在 css 清单中包含 font-awesome css 文件 — 应用程序/样式表/application.css：

/*
 *= require font-awesome/css/font-awesome.min
 *= require_tree .
 *= require_self
 */

在我们的自定义 css 文件中覆盖字体定义 — 应用程序/样式表/font-awesome.css.erb：

@font-face {
  font-family: 'FontAwesome';
  src: url('<%= font_path('fontawesome-webfont.eot') %>');
  src: url('<%= font_path('fontawesome-webfont.eot') %>?#iefix') format('embedded-opentype'), url('<%= font_path('fontawesome-webfont.woff2') %>') format('woff2'), url('<%= font_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= font_path('fontawesome-webfont.ttf') %>') format('truetype'), url('<%= font_path('fontawesome-webfont.svg') %>#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

将 node_modules font-awesome dir + font 文件类型包含到资产管道中— config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join('node_modules/font-awesome/fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

您将获得包含并编译到 public/fonts 目录中的字体，您将获得一个包含所有内容（您的应用程序和 font-awesome）编译到其中的单个 css 文件。

问题是，font-awesome 缩小的 css 包含硬编码的字体路径，为了覆盖它，我们只需添加带有生成字体路径的 font-face 指令。因此，在清单文件中应首先添加 font-awesome.min.css。

但是，虽然一切正常，但您会在控制台中收到 404 错误。我没能解决这个问题，最终放弃并切换到font-awesome-sass gem。

【讨论】：

【解决方案10】：

适用于 Rails 6 + Webpacker。

您可以使用 Yarn 安装：yarn add @fortawesome/fontawesome-free

然后在app/javascript/packs/application.js 中你需要添加这一行：

require("@fortawesome/fontawesome-free/js/all")

它对我有用！我希望这可以帮助别人！

【讨论】：