58

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

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

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

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

4

10 回答 10

124

首先：将 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）

于 2012-06-15T15:28:54.840 回答
49

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

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

/*
 *= require font-awesome
 */

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

有关更多信息，请查看font-awesome-rails 文档。

于 2013-07-23T09:09:40.037 回答
21

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

<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
于 2014-03-23T01:10:37.560 回答
14

除了 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;
}
于 2015-03-10T16:09:59.167 回答
5

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

SASS 红宝石

使用 Official Font Awesome SASS Ruby Gem 可以轻松地将 Font Awesome SASS 导入 Rails 项目。

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

gem 'font-awesome-sass'

然后执行：

$ bundle

将此添加到您的 Application.scss：

@import "font-awesome-sprockets";
@import "font-awesome";
于 2016-12-10T12:38:58.403 回答
4

对于 Rails 6 + Webpacker。

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

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

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

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

于 2020-06-14T15:32:20.250 回答
3

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

  1. 将 FontAwesome 字体文件（EOT、WOFF 等）放在/app/assets、/vendor/assets或/lib/assets的适当命名的子文件夹中，例如：/app/assets/fonts。

  2. 将此行添加到 config/initializers/assets.rb：

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

  3. 将 FontAwesome 的all.css重命名为all.scss。如果您不这样做，Rails 将不会在下一步中预处理路径引用。

  4. 将字体文件的所有路径替换为 Rails 管道引用（即font-url或assets-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"); }

  5. 重新启动服务器。

于 2018-09-24T03:30:11.187 回答
3

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

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

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

将 font-awesome css 文件包含到 css 清单中——app/stylesheets/application.css：

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

在我们的自定义 css 文件 app/stylesheets/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 + 字体文件类型— 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 目录中的字体，并且您将获得单个 css 文件，其中包含所有内容（您的应用程序和 font-awesome）编译到其中。

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

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

于 2019-07-09T19:33:59.560 回答
1

我试过 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

于 2012-08-15T20:09:39.630 回答
0

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

1）将字体真棒文件放在公共文件夹中的“fonts”文件夹中 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;
}
于 2014-03-04T22:04:53.757 回答