Html – Font awesome is not showing icon


I am using Font Awesome and do not wish to add CSS with HTTP. I downloaded Font Awesome and included it in my code, yet Font Awesome is showing a bordered square box instead of an icon. Here is my code:

<link rel="stylesheet" href="../css/font-awesome.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">
<div style="font-size: 44px;">
   <i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x

I would like to know how to make the icon display instead of the bordered square box.

Best Answer

In my case i made the following mistake in my css code.

    font-family: 'Open Sans', sans-serif !important;

This will override all font family rules for the entire page. My solution was to move the code to body like so.

    font-family: 'Open Sans', sans-serif;

NB: Whenever you use the !important flag in css, any other css rule declared of the same type on the same element will get overriden.

Related Question