How to achieve parity between Twitter Bootstrap icons and Font Awesome icons

1
votes

In a Ruby on Rails 3.2 App I'm using Twitter Bootstrap-Sass v 2.0.3 with Font Awesome both installed as Gems.

I'm using 'Font Awesome' because I'd like to change the colors of the Bootstrap Icons.

My problem is that my icons are completely off in terms of alignment to eachother:

enter image description hereenter image description here

What's happening is it's rendering the original black icon and the newer one in separate locations.

On Font Awesome, it says "This giant set of new icons was requested on the Font Awesome GitHub project and includes icon parity with Bootstrap 2.0.3."

How can I align the icons so the shape is the same but so I still manipulate the color through a font?

1
cssruby-on-railstwitter-bootstrapsassfont-awesome
What gem are you using? There's more than one Bootstrap Sass gems. – albertedevigo
gem 'bootstrap-sass', '2.0.3' – Elias7

1 Answers

3
votes

This is how I managed the same issue before. As native bootstrap icons are background images and Font Awesome icons are text content, I just overwrite bootstrap style (e.g. in application.scss) like this:

[class^="icon-"], [class*=" icon-"] {
  background-image: none;
}