1

Trying to implement font awesome into a web project, but the output is a 1px solid border rectangle. I am using Sass with Codekit and I have checked my paths accordingly. see below

1. main.scss

 @import 'base/font-awesome/font-awesome.scss';

2. variables.scss 

$fa-font-path: "../font-awesome/fonts" !default;

3. Folder structure

enter image description here

4. Main.css output 

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

5. HTML 

 <i class="fa-twitter"></i>

What am I doing wrong? I have checked the docs and have looked at other solutions on stackoverflow but it doesn't seem to be working. Thanks

Samuel
  • 5,529
  • 5
  • 25
  • 39

1 Answers1

4

You are missing the fa class, so the font-awesome font is not being actually used but other one. Do it like this:

<i class="fa fa-twitter"></i>
MinusFour
  • 13,913
  • 3
  • 30
  • 39
  • Wow I missed that little detail. Thanks – Samuel Nov 09 '14 at 16:09
  • Forgot to mention, the square you are seeing is because the character code doesn't have a character representation out of the font. Many fonts work like this, they set up a css class just for setting up the font name, so watch out other fonts like that. – MinusFour Nov 09 '14 at 16:13