use*_*180 56 fonts ruby-on-rails font-awesome
我的网页设计师为我提供了已添加到字体真棒的更新字体/图标 - 他将其放在本地字体文件夹中.我还获得了一个font-awesome.css文件.
我直接将fonts文件夹复制到我的资产中,并将font-awesome.css放在assets/stylesheets中.
我的代码中正确引用了css,但是没有加载字体文件夹中的任何图标.
我需要做些什么才能确保所有内容都正确加载和/或引用了fonts文件夹？
VMO*_*ega 122
第一步:将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)
nat*_*vda 47
现在有一种更简单的方法,只需添加gem "font-awesome-rails"到您的Gemfile运行中
bundle install.
然后在application.css中,包含css文件:
/*
*= require font-awesome
*/
它会自动将font-awesome包含在您的资产管道中.完成.开始使用它:)
有关更多信息,请查看font-awesome-rails文档.
Gui*_*eba 20
我提供了另一个答案,在这一个你不必担心宝石或路径或任何这些矫枉过正的解决方案.只需将此行粘贴到application.html.erb(或任何文件布局)中
<head>
...
<link href="//stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
EdC*_*EdC 14
除了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;
}
现在，以下方式是将 Font Awesome 与 Rails 集成的最简单方法：
SASS 红宝石
使用官方 Font Awesome SASS Ruby Gem 可以轻松地将 Font Awesome SASS 导入到 Rails 项目中。
将此行添加到应用程序的 Gemfile 中：
gem 'font-awesome-sass'
然后执行：
$ bundle
将此添加到您的 Application.scss 中：
@import "font-awesome-sprockets";
@import "font-awesome";