title: bootstrap 3 datatables are showing square header sorting icons instead of font-awesome icons
body: <pre><code>    &lt;script type="text/javascript" src="js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;  
                    &lt;script type="text/javascript" src="js/jquery.dataTables.min.js"&gt;     &lt;/script&gt;
                    &lt;script type="text/javascript" src="js/dataTables.bootstrap.js"&gt;&lt;/script&gt;
                    &lt;style&gt;
                        body { font-size: 100%; }
  
       table.dataTable thead th {
          position: relative;
          background-image: none !important;
      }
      table.dataTable thead th.sorting:after,
      table.dataTable thead th.sorting_asc:after,
      table.dataTable thead th.sorting_desc:after {
          position: absolute;
          top: 12px;
          right: 8px;
          display: block;
          font-family: FontAwesome;
      }
      table.dataTable thead th.sorting:after {
          content: "\f0dc";
          color: violet;
          font-size: 0.8em;
          padding-top: 0.12em;
      }
      table.dataTable thead th.sorting_asc:after {
          content: "\f0de";
      }
      table.dataTable thead th.sorting_desc:after {
          content: "\f0dd";
      }
                    &lt;/style&gt;
                    &lt;link href="css/font-awesome.css" rel="stylesheet" type="text/css"/&gt;
  
                    &lt;link href="css/bootstrap.min_1.css" rel="stylesheet" type="text/css"/&gt;
                    &lt;link href="css/dataTables.bootstrap.css" rel="stylesheet" type="text/css"/&gt;
                    &lt;script&gt;
                         $(document).ready(function() {
                         $('#example').dataTable();
                    &lt;/script&gt;
      &lt;/head&gt;
      &lt;table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%"&gt;
  // table data
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>i am using data tables, which are working fine, the header sorting icons are also working fine, but they are not look as font-awesome explained.</p>
  
  <p>they just looking like small squares (blank in chrome)</p>
  
  <p>read about font awesome stylesheets from here : 
  <a href="http://www.datatables.net/blog/2014-06-06#Comments" rel="nofollow">http://www.datatables.net/blog/2014-06-06#Comments</a></p>