有Font-Awesome和Bootstrap错误的Rails 5

Question

I'm building my first rails application, and I'd like to integrate both bootstrap and font-awesome. I managed to get the application working properly using just bootstrap, but when I attempted to incorporate font-awesome as well, I either get the error: file to import not found or unreadable:font-awesome, or the webpage shows up, but only renders using just html, without any of the css or bootstrap styling that I've added. I then simply decided not to use font-awesome, but after attempting to remove it, the application just renders with just the html, and none of the added bootstrap styling.

Here is my application.css.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_font-awesome
 *= require_self
 *= require_tree .
 */
@import "bootstrap-sprockets";
@import "bootstrap";
@import "bootstrap/theme";
@import "font-awesome";

I searched through some other issues that were similar to this one - I saw that for rails engines, if you did @import "font-awesome.css" that seemed to work. However, I'm not building a rails engine, and attempting this did not resolve the issue.

I've included gem 'font-awesome-rails' in my gemfile, and ran a bundle install as well.

Lastly, I'm using rails 5.0.0.1, and font-awesome-rails 4.7.0.0

Any ideas what is wrong? Any help would be much appreciated

Answer 1

Add in Gemfile:

gem 'bootstrap-sass', '~> 3.3.6'
gem 'font-awesome-sass', '~> 4.7.0'

And then bundle install

Create a file in /app/assets/stylesheets/bootstrap_overrides.css.scss and add this line:-

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

Example to use font awesome, in the view:

<%= icon('flag') %>

Please check the link for more usages on font awesome