CODEWITHSUNDEEP
twitter-bootstrapfontsfont-facefont-awesome
lostintranslation
lostintranslation

Reputation: 24583

Use Font Awesome in bootstrap without overriding glyphs

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?

Upvotes: 4

Views: 16156

Answers (3)

Blaze
Blaze

Reputation: 116

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/

Upvotes: 8

Shail
Shail

Reputation: 3649

Important* to use both glyphicons and fontawesome you will have to disable icons with same name . Suppose You want to use Glyphicons icon-screenshot than disable it in fontawesome .
And those icons which you want to use from fontawesome disable them in glyphicons . First step is to include fontawesome css file into the head section after the bootstrap.css file,example:

If you want to use icon-file from fontawesome Than just disable it in bootstrap.css . Like this
/* icon-file { background-position: -24px -24px; } */

<head>
 <link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">

</head>

See Jsfiddle Jsfiddle with font awesome

A simple button with fontawesome icon:-

<a class="btn" href="#">
<i class="icon-repeat"></i> Repeat</a>

Nav Pills with font awesome :-

<ul class="nav nav-pills">
     <li class="active"><a href="#"><i class="icon-file"></i> New File</a></li>
     <li><a href="#"><i class="icon-cut"></i> Cut</a></li>
     <li><a href="#"><i class="icon-edit"></i> Edit</a></li>
     <li><a href="#"><i class="icon-paste"></i> Settings</a></li>
</ul>

Insert space between the closing i tag and the words you type after it .

Upvotes: -1

Robin
Robin

Reputation: 3396

I think this isn't possible until you rename any CSS classes which Font Awesome defines. Font Awesome is meant to be an replacement for Bootstrap's icons and hence redefines any icon-* classes.

Upvotes: 0

Related Questions