Use Font Awesome in bootstrap without overriding glyphs

Question

I would like to use some Font Awesome fonts in my bootstrap application. It is a legacy application and the customer does not want new icons. The current icons are bootstrap glyphs. Font Awesome icons are very close but not the same. No big deal right? Shouldn't I be able to use a font-family to use Font Awesome and just put the right font in for the icon I want.

I have the Font Awesome 'fonts' directory in my project. It contains 4 files:

fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.tff
fontawesome-webfont.woff

What css do I need to add to get this to work?

What should my html markup looklike? I have seen examples like this:

<g><text x="0" y="0">&#xf040</text></g>

However when I do that it doesn't work. I know I am missing a few steps. Any ideas?

Solution

I replaced all the "icon-" for "fw-icon-" in the font-awesome.css file. Then, all the bootstrap icons still the same, and if I need to use a FontAwesome icon or class, I just need to use "fw-" in the front.

Example:

<i class="fw-icon-2x fw-icon-star" data-toggle="tooltip" title="Starred"></i>

Edit:

Today, Font Awesome 4.0 was released and all the classes are different to the Bootstrap's icons pattern:

<i class="fa fa-camera-retro"></i> fa-camera-retro

Here you can see: http://fontawesome.io/examples/

Comments

[Robin]

This way you replace Bootstrap's icons with Font Awesome but the OP wanted to have Font Awesome's icons in addition to Bootstrap's ones!

[Shail]

If icons with different names will be used both glyph and fontawesome can be used , Same name icons will be displayed twice .

[amcgregor]

As the two fonts are distinct, and the glyphs are in the "user" UNICODE codepage anyway, this is the correct solution. Namespace them.