Conflict between Bootstrap and other font icons

Question

I am using bootstrap3 in my project. Now i want to use some font-icons besides with it's core icons. First I tried Font Awesome4, but it seems that there is some problem and icons are displaying like squares. also I tried FlatUI icons and the same problem appeared..

Does anyone have this trouble? How can I resolve it?

EDIT

for example for fontawesome I put the link below in my header

<link href="{{ asset('css/font-icon/css/font-awesome.min.css') }}" rel="stylesheet" />

I have also tried using cdn

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

I checked it with firebug, the fonts are loaded but it appears like some squares :| the square

firebug inspection

hmmm, its happens if u dont have font included or he just missing. Do you have your font in the right folder? — Petroff, Apr 25 '14 at 17:50
Can you show an example of your code where you have added the font awesome files. — BenEgan1991, Apr 25 '14 at 17:53
@Nividim, thanks for your comment, I've updated the question with additional information. — parisssss, Apr 26 '14 at 08:30
@BenEgan1991, thanks for your comment, I've updated the question with additional information. — parisssss, Apr 26 '14 at 08:32
`src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');` Do you have that `.eot` file in folder `/fonts`? — Petroff, Apr 26 '14 at 10:59
@Nividim, Yes! I've extracted the given folder from fontawesome and not changed. And as I said, it has the problem with other font icons too, i thought that maybe the problem is woth bootstrap.. maybe I should change some thing in it.. — parisssss, Apr 26 '14 at 17:16

score 0 · Accepted Answer · answered Apr 26 '14 at 18:20

I think I have found the solution, maybe dirty one..

I added this lines to my css:

[class*="fa-"]{
display: inline-block;
font-family: 'FontAwesome' !important;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

and also these ones to my .htaccess

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Conflict between Bootstrap and other font icons

1 Answers1