Browser Doesn't Recognize Icons Of FontAwesome - css

Question

There is a problem with me that the icons is not showing in the browser.
I can not able to find out that my browser doesn't have the Fontawesome font but even not showing when Internet is connected Please anyone can help me for this.
.checkbox {
padding-left: 20px; }
.checkbox label {
display: inline-block;
position: relative;
padding-left: 5px; }
.checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: 0;
margin-left: -20px;
border: 1px solid #cccccc;
border-radius: 0px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out; }
.checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: 0;
top: 0;
margin-left: -20px;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555; }
.checkbox input[type="checkbox"] {
opacity: 0; }
.checkbox input[type="checkbox"]:focus + label::before {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
.checkbox input[type="checkbox"]:checked + label::after {
content: "\f00c";
font-family: 'FontAwesome'; }
.checkbox input[type="checkbox"]:disabled + label {
opacity: 0.65; }
.checkbox input[type="checkbox"]:disabled + label::before {
background-color: #eeeeee;
cursor: not-allowed; }
.checkbox-primary input[type="checkbox"]:checked + label::before {
background-color: #fff;
border-color: #adadad; }
.checkbox-primary input[type="checkbox"]:checked + label::after {
color: #fff; }
<div class="checkbox checkbox-primary">
<input id="checkbox2" type="checkbox" checked="">
<label for="checkbox2" >
Primary \f00c
</label>
</div>
<i class="fa fa-camera-retro fa-lg"></i> fa-lg

Answer 1

Fonteawesome expects the font files packaged with its css to be in a specific directory location in comparison to the css, take a look at the first few lines of the css file where it creates the font family for specific font file types. If your directory is different you'll need to adjust the directory location inside the font awesome css, font families.

Answer 2

You should install the font-awesome fonts files like .eot, .ttf, .woff and .svg and font-awesome css in local host after that icons will be rendered on browser.