Rails:使用 Font Awesome [英] Rails: Using Font Awesome

问题描述

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

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.

我直接把fonts文件夹复制到我的assets中，然后把font-awesome.css放在assets/stylesheets中.

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

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

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

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

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

推荐答案

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

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

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

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

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

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

Now rename the font-awesome.css to font-awesome.css.scss.erb and edit it like this: 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)

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

这篇关于Rails:使用 Font Awesome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！