Search code examples
csssassfont-awesomecodekit

Font awesome black rectangle

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

Solution

  • 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>