Ruby-on-rails Rails：使用 Font Awesome

Question

提问by user464180

My web designer has provided me with updated fonts/icons that have been added to font awesome - he placed this in a local fonts folder. I was also given a font-awesome.css file.

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

I copied the fonts folder into my assets directly and put font-awesome.css in assets/stylesheets.

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

The css is referenced correctly in my code, but none of the icons from the font folder get loaded.

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

Is there something I need to do to ensure everything gets loaded correctly and/or that the fonts folder is referenced?

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

Answer 1

回答by VMOrtega

first: add app/assets/fonts to the asset path (config/application.rb)

第一：将 app/assets/fonts 添加到资产路径（config/application.rb）

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

then move the font files into /assets/fonts (create the folder first)

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

Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: change:

现在将 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;
}

to this:

对此：

@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;
}

Finally: check all resources are loaded correctly (with Firebug or Chrome Inspector)

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

Answer 2

回答by nathanvda

There is now an easier way, just add gem "font-awesome-rails"to your Gemfileand run bundle install.

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

Then in your application.css, include the css file:

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

/*
 *= require font-awesome
 */

It includes the font-awesome into your asset pipeline automatically. Done. Start using it :)

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

For more information, check the font-awesome-rails documentation.

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

Answer 3

回答by Guillermo Siliceo Trueba

I offer another answer, in this one you won't have to worry about gems or paths or any of those overkill solutions. Just paste this line in your application.html.erb (or whatever file your layout is)

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

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

Answer 4

回答by EdC

In addition to Vicoar's answer

除了 Vicoar 的回答

For Rails 4 you have to change the CSS slightly differently. Note the usage of font_url:

对于 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;
}

Answer 5

回答by AR Rose

Now, Following way is the easiest way to integrate Font Awesome with Rails:

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

SASS Ruby Gem

SASS 红宝石

Use the Official Font Awesome SASS Ruby Gem to easily get Font Awesome SASS into a Rails project.

使用官方 Font Awesome SASS Ruby Gem 可以轻松地将 Font Awesome SASS 导入到 Rails 项目中。

Add this line to your application's Gemfile:

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

gem 'font-awesome-sass'

And then execute:

然后执行：

$ bundle

Add this to your Application.scss:

将此添加到您的 Application.scss 中：

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

Answer 6

回答by Vladimir Rozhkov

How to use font-awesome 4 with barebones Rails 6 and Webpacker, without any additional gems, copy-pasting font or css files into your app and doing other weird things:

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

Add font-awesome npm package —? package.json:

添加字体很棒的 npm 包 —？包.json：

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

Include font-awesome css file into css manifest — app/stylesheets/application.css:

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

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

Override font-face definition in our custom css file — app/stylesheets/font-awesome.css.erb:

覆盖自定义 css 文件中的 font-face 定义 - 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;
}

Include node_modules font-awesome dir + font file types into assets pipeline— config/initializers/assets.rb

将 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/

You'll get fonts included and compiled into public/fonts directory and you'll get single css file with all stuff (your app and font-awesome) compiled into it.

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

The thing is, font-awesome minified css contains hardcoded paths to fonts and to override this we just adding font-face directive with generated fonts paths. Because of this, the font-awesome.min.css should be added first in the manifest file.

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

However, while everything will work fine, you'll get 404 errors in console. I wasn't managed to fix this and eventually gave up and switched to font-awesome-sassgem.

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

Answer 7

回答by MSC

Having just gone through this with Rails 5.2, I'd like to share how this works if you don't want to use the font-awesome-rails gem:

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

Put the FontAwesome font files (EOT, WOFF, etc.) in a suitably named subfolder of /app/assets, /vendor/assetsor /lib/assets, eg: /app/assets/fonts.
Add this line to config/initializers/assets.rb:
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")
Rename FontAwesome's all.cssto all.scss. If you don't do this, Rails won't pre-process the path references in the next step.
Replace all the paths to the font files with Rails pipeline references (ie. font-urlor asset-url):
eg. before
@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 900; src: url("../webfonts/fa-solid-900.eot"); src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }
eg. after
@font-face { font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 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") format("woff"), asset-url("fa-solid-900.ttf") format("truetype"), asset-url("fa-solid-900.svg#fontawesome") format("svg"); }
Restart the server.

将 FontAwesome 字体文件（EOT、WOFF 等）放在/app/assets、/vendor/assets或/lib/assets的适当命名的子文件夹中，例如：/app/assets/fonts。
将此行添加到 config/initializers/assets.rb：
Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts")
将 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：资产网址（“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"); }
重新启动服务器。

Answer 8

回答by Tony Han

I have tried vicoar's , but it doesn't work on my project based on ruby 1.9.3 and rails 3.2. Then I rename the file name font-awesome.cssto font-awesome.css.erband change the @font-faceto this:

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

It works very well and the code is very simple...(your can refer the guide asset_pipeline

它工作得很好，代码也很简单......（你可以参考指南asset_pipeline

Answer 9

回答by Tom

For rails 3.2.* a quick solution:

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

1) Put the font awesome files in a "fonts" folder in the public folder 2) Open font-awesome.css and change the 4 entries for "../fonts" to "/fonts" at the top of the file

1) 将字体 awesome 文件放在公共文件夹的“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;
}

Ruby-on-rails Rails：使用 Font Awesome

提问by user464180

回答by VMOrtega

回答by nathanvda

回答by Guillermo Siliceo Trueba

回答by EdC

回答by AR Rose

回答by Vladimir Rozhkov

回答by MSC

回答by Tony Han

回答by Tom

相关推荐

最近更新

标签

Ruby-on-rails Rails：使用 Font Awesome

提问by user464180

回答by VMOrtega

回答by nathanvda

回答by Guillermo Siliceo Trueba

回答by EdC

回答by AR Rose

回答by Vladimir Rozhkov

回答by MSC

回答by Tony Han

回答by Tom

相关推荐

Ruby-on-rails Rails ActiveRecord 如何在没有多个查询的情况下链接“where”子句？

Ruby-on-rails Rails - 仅在创建时验证

Ruby-on-rails 在 Rails 中，无法为 {"adapter"=>"postgresql" 创建数据库，

Ruby-on-rails 如何将rails更改为开发模式

相关推荐

最近更新

标签