CODEWITHSUNDEEP
csstwitter-bootstrapfont-awesome
losee
losee

Reputation: 2238

Bootstrap social media Icons not working as shown on the bootstrap site

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 <head> so my head now looks like this

<head>
     <title>{% block title %}{{post.title}}{% endblock title %}</title>

     <link href="{% static 'blog/css/blog.css' %}" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:100" rel="stylesheet" type="text/css">


        <style>
            {% block style %}
            {% endblock style %}
        </style>

        <script   src="https://code.jquery.com/jquery-1.12.3.min.js"
                  integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ="   crossorigin="anonymous"></script>

           <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" >

        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>

        <!--<script type="text/javascript" src="http://content.jwplatform.com/libraries/WQWJdvRx.js"></script>-->

        {% block head_extra %}{% endblock head_extra %}

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    </head>

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.

<div class="container">
         <a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
            <span class="fa fa-twitter"></span>
         </a>

        <li><a href="#"><i class="fa fa-lg fa-youtube-square"></i></a></li>
    </div>

How do I make this syntactically correct to make this work? All guidance and advice is welcome

Upvotes: 1

Views: 6608

Answers (2)

Paulie_D
Paulie_D

Reputation: 114990

According to the Font Awesome Page

To stack multiple icons, use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.

The correct format would be:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank">
    <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
  </a>
  <a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-youtube" target="_blank">
    <span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-youtube-square fa-stack-1x"></i>
</span>
  </a>
</div>

BTW: Your HTML is invalid. li must be children of a ul.

Upvotes: 1

andnowchris
andnowchris

Reputation: 149

<div class="container">
 <ul>
     <li><a href="https://twitter.com/el_alturas" class="btn btn-social-icon btn-twitter" target="_blank"><i class="fa fa-twitter"></i>
     </a></li>

    <li><a href="#"><i class="fa fa-youtube-square"></i></a></li>
 </ul>
</div>

Upvotes: 1

Related Questions