title: datatables - sort icon duplicating
body: <p>I'm trying to setup the example for datatables found here - </p>
  
  <p><code>http://www.datatables.net/examples/basic_init/zero_configuration.html</code></p>
  
  <p>Everything is successful but for some reason the sort icon is duplicating and I don't know why.</p>
  
  <p>This is what It's displaying like - </p>
  
  <p><img src="https://i.imgur.com/gd1c4L1.png" alt=""></p>
  
  <p>here is the html I'm using - </p>
  
  <pre><code>{% extends "dashboard/base.html" %}
  
  {% load static %}
  
  {% block extra_head %}
  
      &lt;!-- Tribal CSS --&gt;
      &lt;link href="{% static "css/plugins/tribal/tribal-bootstrap.css" %}" rel="stylesheet" /&gt;
      &lt;link href="{% static "css/plugins/tribal/tribal-form.css" %}" rel="stylesheet" /&gt;
  
      &lt;!-- Tribal JS --&gt;
      &lt;script src="{% static "js/plugins/tribal/tribal-form.js" %}"&gt;&lt;/script&gt;
      &lt;script src="{% static "js/plugins/tribal/tribal-shared.js" %}"&gt;&lt;/script&gt;
  
      &lt;!-- DataTables CSS --&gt;
      &lt;link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"&gt;
  
      &lt;!-- DataTables --&gt;
      &lt;script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript" charset="utf-8"&gt;
      $(document).ready(function() {
          $('#files').DataTable();
      } );
      &lt;/script&gt;
  
  {% endblock %}
  
  {% block title %}{{ user }} Dashboard{% endblock %}
  
  {% block content %}
  
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12"&gt;
                      &lt;h1 class="page-header"&gt;Profile&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col-lg-12 --&gt;
              &lt;/div&gt;
              &lt;div class="container"&gt;
                  &lt;div class="well"&gt;
                      &lt;dl class="dl-horizontal dl-multicolumn" data-colcount="3"&gt;
                          &lt;dt&gt;Name&lt;/dt&gt;
                          &lt;dd&gt;{{ user }}&lt;/dd&gt;
                          &lt;dt&gt;Gender&lt;/dt&gt;
                          &lt;dd&gt;Male&lt;/dd&gt;
                          &lt;dt&gt;School&lt;/dt&gt;
                          &lt;dd&gt;Sheffield School&lt;/dd&gt;
                          &lt;dt&gt;DOB&lt;/dt&gt;
                          &lt;dd&gt;01/01/1986&lt;/dd&gt;
                          &lt;dt&gt;Email&lt;/dt&gt;
                          &lt;dd&gt;{{ user }}&lt;/dd&gt;
                          &lt;dt&gt;Address&lt;/dt&gt;
                          &lt;dd&gt;
                              26 Main Road&lt;br /&gt;
                              Sheffield&lt;br /&gt;
                              S1 1AA&lt;/dd&gt;
                      &lt;/dl&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12"&gt;
                      &lt;h1 class="page-header"&gt;File Access&lt;/h1&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col-lg-12 --&gt;
              &lt;/div&gt;
  
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;
                              File &amp; Vendor Listings
                          &lt;/div&gt;
                          &lt;!-- /.panel-heading --&gt;
                          &lt;div class="panel-body"&gt;
                              &lt;div class="table-responsive"&gt;
                                  &lt;table class="table table-striped table-bordered table-hover" id="files"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th&gt;Vendor&lt;/th&gt;
                                              &lt;th&gt;Filename&lt;/th&gt;
                                              &lt;th&gt;Invoke Date&lt;/th&gt;
                                              &lt;th&gt;Revoke Date&lt;/th&gt;
                                              &lt;th&gt;CSS grade&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;Trident&lt;/td&gt;
                                              &lt;td&gt;Internet Explorer 4.0&lt;/td&gt;
                                              &lt;td&gt;Win 95+&lt;/td&gt;
                                              &lt;td class="center"&gt;4&lt;/td&gt;
                                              &lt;td class="center"&gt;X&lt;/td&gt;
                                          &lt;/tr&gt;
  </code></pre>
  
  <p>I'm using django so the jquery is being extended from base.html like so - </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  {% load static %}
  
  {% if user.is_authenticated %}
  
  &lt;head&gt;
  
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;{% block title %}datapi.io Company Dashboard{% endblock %}&lt;/title&gt;
  
      &lt;!-- Latest compiled and minified CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
  
      &lt;!-- MetisMenu CSS --&gt;
      &lt;link href="{% static "css/plugins/metisMenu/metisMenu.min.css" %}" rel="stylesheet"&gt;
  
      &lt;!-- Custom CSS --&gt;
      &lt;link href="{% static "css/sb-admin-2.css" %}" rel="stylesheet"&gt;
  
      &lt;!-- Custom Fonts --&gt;
      &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- Google Fonts --&gt;
      &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
          &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
          &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="//code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Latest compiled and minified JavaScript --&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Metis Menu Plugin JavaScript --&gt;
      &lt;script src="{% static "js/plugins/metisMenu/metisMenu.min.js" %}"&gt;&lt;/script&gt;
  
      &lt;!-- Custom Theme JavaScript --&gt;
      &lt;script src="{% static "js/sb-admin-2.js" %}"&gt;&lt;/script&gt;
  
      {% block extra_head %}{% endblock %}
  
  &lt;/head&gt;
  </code></pre>