1

In my site, the icons of font awesome sometimes become squares, and most of the time, they load correctly, i've been looking for that issue in forums, and it seems that this case is not the same as theirs: the icons are of font awesome and class fa fa-ANYEXAMPLE exists the fonts are in a folder (/css/fonts) as it should be the content of the file fontawesome.css are copied in the file bootstrap.css and called in the head of the site I consider that my links are correct, since the icons load correctly most of the time What could the problem be?

Derick Alangi
  • 1,080
  • 1
  • 11
  • 31
cihan17
  • 77
  • 2
  • 8
  • This question has been asked already here. Check these links: http://stackoverflow.com/questions/26867795/font-awesome-showing-just-square-box-instead-icon, http://www.hanselman.com/blog/WhyDoMyFontAwesomeIconsShowUpAsBlankSquares.aspx and http://stackoverflow.com/questions/14366158/font-awesome-not-working-icons-showing-as-squares – Derick Alangi Aug 18 '16 at 13:52

1 Answers1

2

Open your style.css and link to FontAwesome using font-face:

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

Just make sure to edit the paths if they are any different.

mrhallak
  • 1,138
  • 1
  • 12
  • 27
  • i used the absolute url – cihan17 Aug 30 '16 at 08:48
  • using absolute URL didn't work. So i returned my css as it was. After that, i noticed a strange error in the console "font from origin has been blocked from loading by Cross-Origin ... No Access-Control-Allow ...", when i added www to my URL the font were ok, so i added a redirection to www.my site. and it is ok now. if there is anyone who can explain why this happened, it would be useful to me – cihan17 Sep 30 '16 at 10:50