Rails:使用令人惊叹的字体

Question

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

我直接将fonts文件夹复制到我的资源中，并将font-awesome.css放入了assets/stylesheets。

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，并像这样编辑它: change：

@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

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

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

/*
 *= require font-awesome
 */

它会自动将令人敬畏的字体添加到资产管道中。好了。开始使用它:)

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

Answer 3

我提供了另一个答案，在这个答案中，您不必担心gem或路径或任何那些过度杀伤力的解决方案。只需将此行粘贴到您的application.html.erb (或任何您的布局文件)中

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