Geek Answers Handbook

Use Awesome font in bootstrap without overriding glyphs

I want to use some Font Awesome fonts in my boot application. This is an outdated application and the client does not need new icons. Current icons are bootstrap glyphs. Font Amazing icons are very close, but not the same. Nothing wrong? If I can't use the font family to use Font Awesome and just put the right font in the right icon.

My project has a Font Awesome 'fonts' font directory. It contains 4 files:

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

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

What should my html markup look like? I saw such examples:

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

However, when I do this, it does not work. I know that I am missing a few steps. Any ideas?

+4
source share
3 answers

I replaced all the “icon-” with “fw-icon-” in the font-awesome.css file. Then all bootstrap icons still match, and if I need to use the icon or the FontAwesome class, I just need to use "fw-" at the beginning.

Example:

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

Edit:

Font Awesome 4.0 came out today, and all classes are different from the Bootstrap icon template:

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

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

+8
source

I think this is not possible until you rename any CSS classes that Font Awesome defines. The Awesome font is intended to replace Bootstrap badges and, therefore, overrides any badges *.

0
source

It is important * to use both glyphics and fontawesome, you will have to disable the icons with the same name. Suppose you want to use Glyphicons icon-screenshot than disable it in fontawesome.
And those icons that you want to use from fontawesome, disable them in glyphics. The first step is to include the fontawesome css file in the chapter section after the bootstrap.css file, for example:

If you want to use the icon-file from fontawesome, then 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 awesome font

Simple button with fontavesome icon: -

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

Nav Pills with amazing font: -

 <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 a space between the closing tag i and the words you enter after it.

-1
source

More articles:


All Articles