Font-Awesome icons showing up as square boxes

Why is my code not showing me the icons ?

<ul>
    <li><a href="#" class="facebook" data-toggle="tooltip" data-placement="top" title="Facebook"><i class="fa fa-facebook"></i></a></li>
    <li><a href="#" class="twitter" data-toggle="tooltip" data-placement="top" title="Twitter"><i class="fa fa-twitter"></i></a></li>
</ul>

Had the same problem, where some of the icons showing up as square boxes.

it only happened with a local reference of font awesome to my web app.

when i investigate the URL, i saw that there was also web fonts that needed to be loaded (not only the css file itself):

and than save the web fonts with right click - open new tab:

and move those files into your web-fonts folder. (in my case, i had to overwrite the existing webfonts - this is why it show the square boxes in first place).

and the problem solved!