CODEWITHSUNDEEP
htmlcsstwitter-bootstrapfonts
Sireini
Sireini

Reputation: 4262

Font-awesome icons not showing but main.css is showing

I have a project with bootstrap en font-awesome setup if I view my main.css the first thing I see is that font-awesome is imported. And all its icons, I don't understand why the html is not picking up the font-awesome classes.

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url('../../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

I'll hope someone can help me out on this

Upvotes: 0

Views: 172

Answers (2)

mkawa
mkawa

Reputation: 203

is this your project folder looks like? folder structure image

if so, then remove one "../" in your font-awesome.css file.

 @font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Upvotes: 1

D. Schreier
D. Schreier

Reputation: 1788

You need to check the font path, check in the Console of your browser (Ctrl+Shift+J on Chrome) if you don't get an alert like

Failed to load resource: [...]

This kind of warning means that the path of the ressource is wrong.

Upvotes: 0

Related Questions