title: $modal.modal is not a function in FooTable
body: <p>I am following this <a href="http://fooplugins.github.io/FooTable/docs/examples/component/editing.html" rel="nofollow noreferrer">Tutorial</a>.</p>
  
  <p>Here is my code (I've excluded my table HTML):</p>
  
  <pre><code>@model IEnumerable&lt;JMWebApp.Models.Job&gt;
  
  @{
      Layout = "~/Views/Shared/_Layout.cshtml";
      ViewBag.Title = "Job Manager";
  }
  
  &lt;div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title"&gt;
      &lt;style scoped&gt; 
          .form-group.required .control-label:after {
              content:"*";
              color:red;
              margin-left: 4px;
          }
      &lt;/style&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;form class="modal-content form-horizontal" id="editor"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;x&lt;/span&gt;&lt;/button&gt;
                  &lt;h4 class="modal-title" id="editor-title"&gt;Add Row&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;input type="number" id="id" name="id" class="hidden"/&gt;
              &lt;/div&gt;
              &lt;div class="form-group required"&gt;
                  &lt;label for="reference" class="col-sm-3 control-label"&gt;Reference&lt;/label&gt;
                  &lt;div class="col-sm-9"&gt;
                      &lt;input type="text" class="form-control" id="reference" name="reference" placeholder="Reference" required&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="submit" class="btn btn-primary"&gt;Save Changes&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      jQuery(function($) {
          var $modal = $('#editor-modal'),
              $editor = $('#editor'),
              $editorTitle = $('#editor-title'),
              ft = FooTable.init('#editing-example',
                  {
                      editing: {
                          editRow: function(row) {
                              var values = row.val();
                              $editor.find('#id').val(values.id);
                              $editor.find('#reference').val(values.reference);
                              $modal.data('row', row);
                              $modal.modal('show');
                              $editorTitle.text('Edit row #' + values.id);
                          }
                      }
                  });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In my Layout file I define my scripts as so:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;script src="~/Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt;
      &lt;script src="~/scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="~/scripts/footable.min.js"&gt;&lt;/script&gt;
      &lt;link href="~/Content/site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="~/Content/footable.bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="~/Content/footable.fontawesome.css" rel="stylesheet" type="text/css" /&gt; 
  &lt;/head&gt;
  </code></pre>
  
  <p>I am having two issues with this. First of all the icons on the 'FooTable' are not displaying correctly, they just look like jumbled characters. I did read an answer before that there are a number of font files I needed to include.</p>
  
  <p>I tried that but it didn't work, also I couldn't find any guidance on the FooTable website to include these icons.</p>
  
  <p>Secondly I'm getting an error $modal.modal is not a function when I am attempting to edit the rows and show the modal. I also read a few answers to this in that my jQuery must be resolved before bootstrap, but as far as I can see in my Layout the scripts are loaded correctly.</p>
  
  <p>I'd appreciate any help.</p>