Rails:使用Font Awesome

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

我直接将字体文件夹复制到我的资产中,并将font-awesome.css放在assets / stylesheets中。

在我的代码中,css被正确引用,但是没有任何来自字体文件夹的图标被加载。

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

首先:将应用程序/资产/字体添加到资产path(config / application.rb)

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

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

现在将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)

现在有一个更简单的方法,只需将gem "font-awesome-rails"Gemfile并运行bundle install

然后在你的application.css中,包含css文件:

 /* *= require font-awesome */ 

它自动将font-awesome包含到资产pipe道中。 完成。 开始使用它:)

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

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

我提供了另一个答案,在这一个你不必担心gem或path或任何这些矫枉过正的解决scheme。 只要将这一行粘贴到你的application.html.erb(或者你的布局的任何文件)

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

我已经尝试过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

对于导轨3.2。*快速解决scheme:

1)将字体真棒文件放在公用文件夹中的“字体”文件夹中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; } 

现在,下面的方法是整合Font Awesome和Rails最简单的方法:

SASSrubygem

使用官方字体真棒SASSrubyGem很容易得到字体真棒SASS成Rails项目。

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

 gem 'font-awesome-sass' 

然后执行:

 $ bundle 

将此添加到您的Application.scss:

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