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:
<html>
<head>
<link rel="stylesheet" href="../css/font-awesome.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
</head>
<body>
<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
</div>
</body>
</html>
I would like to know how to make the icon display instead of the bordered square box.
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.
body{
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.