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="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";
