Question

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

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

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

我是否需要做些什么来确保所有内容都正确加载和/或引用了fonts文件夹？

Answer 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）

Answer 2

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

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

/*
 *= require font-awesome
 */

它自动将font-awesome包含在您的资产管道中。完成。开始使用它：）

有关详细信息，请查看font-awesome-rails documentation。

Answer 3

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

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

Answer 4

除了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;
}

Answer 5

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

SASS Ruby Gem

使用官方字体真棒SASS Ruby Gem轻松将Font Awesome SASS纳入Rails项目。

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

gem 'font-awesome-sass'

然后执行：

$ bundle

将此添加到您的Application.scss：

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

Answer 6

对于Rails 6 + Webpacker。

您可以使用以下纱线进行安装：yarn add @fortawesome/fontawesome-free

然后在app/javascript/packs/application.js中，您需要添加以下行：

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

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

Answer 7

我尝试了vicoar，但它不适用于基于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

Answer 8

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

Answer 9

刚刚在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 << Rails.root.join（“ app”，“ assets”，“ fonts））
将FontAwesome的 all.css 重命名为 all.scss 。如果不这样做，Rails将不会在下一步中预处理路径引用。
使用Rails管道引用（即font-url或asset-url）替换字体文件的所有路径：

例如之前

@ font-face { 字体家族：“ Font Awesome 5 Free”；字体样式：正常；字体粗细：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“）; }

例如之后

@ font-face { 字体家族：“ Font Awesome 5 Free”；字体样式：正常；字体粗细：900； src：asset-url（“ fa-solid-900.eot”）; src：资产网址（“ fa-solid-900.eot？#iefix”）格式（“嵌入式开放类型”），资产网址（“ fa-solid-900.woff2”）格式（“ woff2”），资产-url（“ fa-solid-900.woff”）格式（“ woff”），资产URL（“ fa-solid-900.ttf”）格式（“ truetype”），资产URL（“ fa-solid- 900.svg＃fontawesome“）format（” svg“）; }
重新启动服务器。

Answer 10

如何在带有准系统的Rails 6和Webpacker上使用真棒字体4，而无需任何其他gem，将字体或css文件复制粘贴到您的应用中以及做其他奇怪的事情：

添加真棒字体的npm软件包- package.json：

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

在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字体超赞的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文件。

问题是，令人敬畏的字体最小化CSS包含了字体的硬编码路径，而要覆盖它，我们只需添加带有生成字体路径的font-face指令即可。因此，应该在清单文件中首先添加font-awesome.min.css。

Rails：使用Font Awesome

10 个答案: