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

问题描述

我的网页设计师为我提供了更新的字体/图标，已经添加到字体真棒 - 他把它放在本地的字体文件夹。我也被给了一个font-awesome.css文件。

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

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

有什么我需要做的，以确保一切正确加载和/或字体文件夹被引用？

解决方案

第一：
应用程序/资产/字体添加到资产路径（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'）; （''/ font / fontawesome-webfont.eot？#iefix'）格式（'eot'），url（'../ font / fontawesome-webfont.woff'）格式（'woff （''/ font / fontawesome-webfont.svg＃FontAwesome'）格式（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
 
 
 $ b $ p 
 
 
 
 
  
 
  @ font-face {
 font-family：FontAwesome; 
 src：url（'<％= asset_path（fontawesome-webfont.eot）％>'）; $（'eot'），url（'<％= asset_path（'格式（'woff'），url（'<％= asset_path（fontawesome-webfont.ttf）％>'）格式（'truetype'），url （'<％= asset_path（fontawesome-webfont.svg）+#FontAwesome％>'）format（'svg'）; 
 font-weight：normal; 
 font-style：normal; 
 
 $ / code> 
最后：检查所有资源是否正确加载（使用Firebug或Chrome Inspector） / p> 
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. 


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

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?
解决方案
first:
add app/assets/fonts to the asset path (config/application.rb)
config.assets.paths << Rails.root.join("app", "assets", "fonts")
then move the font files into /assets/fonts (create the folder first)

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

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