title: Browser Doesn't Recognize Icons Of FontAwesome
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="checkbox checkbox-primary"&gt;
          &lt;input id="checkbox2" type="checkbox" checked=""&gt;
                 &lt;label for="checkbox2" &gt;
                       Primary \f00c
                 &lt;/label&gt;
  &lt;/div&gt;
  &lt;i class="fa fa-camera-retro fa-lg"&gt;&lt;/i&gt; fa-lg</code></pre>
  </div>
  </div>
  </p>