title: Bootstrap social media Icons not working as shown on the bootstrap site
body: <p>I want to add social media icons to my site. I want them to look like squares with rounded corners. I already have bootstrap via a cdn and per the instructions I added the font awesome  in my <code>&lt;head&gt;</code> so my head now looks like this</p>
  
  <pre><code>&lt;head&gt;
       &lt;title&gt;{% block title %}{{post.title}}{% endblock title %}&lt;/title&gt;
  
       &lt;link href="{% static 'blog/css/blog.css' %}" rel="stylesheet"&gt;
          &lt;link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css"&gt;
  
  
          &lt;style&gt;
              {% block style %}
              {% endblock style %}
          &lt;/style&gt;
  
          &lt;script   src="https://code.jquery.com/jquery-1.12.3.min.js"
                    integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"&gt;&lt;/script&gt;
  
             &lt;!-- Latest compiled and minified CSS --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" &gt;
  
          &lt;!-- Optional theme --&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" &gt;
  
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"&gt;&lt;/script&gt;
  
          &lt;!--&lt;script type="text/javascript" src="http://content.jwplatform.com/libraries/WQWJdvRx.js"&gt;&lt;/script&gt;--&gt;
  
          {% block head_extra %}{% endblock head_extra %}
  
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
      &lt;/head&gt;
  </code></pre>
  
  <p>and this is what I have which is a copy and paste from the site, except for the container div which I saw in a tutorial before I posted here, and thought by adding it, it would make a difference. It didn't.</p>
  
  <pre><code>&lt;div class="container"&gt;
           &lt;a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank"&gt;
              &lt;span class="fa fa-twitter"&gt;&lt;/span&gt;
           &lt;/a&gt;
  
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-lg fa-youtube-square"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>How do I make this syntactically correct to make this work? All guidance and advice is welcome</p>