Bootstrap social media Icons not working as shown on the bootstrap site
<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>