Twitter Bootstrap Question posted in

Bootstrap Font Awesome Social Buttons not working – Twitter bootstrap

I’m using a template for my website, but now I’m trying to change the buttons for Social Media. If I specify the color in a class (for example btn btn-primary) the button changes its color. But only with the btn btn-social btn-twitterit gets transparency. I assume this is related with the Bootstrap template is using.

My question is: is there some way of forcing button’s color while using the btn btn-social btn-twitter object?

This is my code:

<div class="call-to-action">
    <h4 class="mb-5">Mamá Quiero Ser Científica</h4>
    <ul>
        <li>
            <h5>Follow us on our Social Media</h5>
        </li>
        <li>
            <a target="_blank" href="https://twitter.com/mqscientifica" class="btn btn-social btn-twitter waves-effect waves-light" rel="nofollow">Twitter <span class="fa fa-twitter"></span></a>
        </li>
        <li>
            <a target="_blank" href="https://www.facebook.com/Mam%C3%A1-Quiero-Ser-Cient%C3%ADfica-748273108707351/" class="btn btn-block btn-social btn-facebook waves-effect waves-light" rel="nofollow">Facebook <span class="fa fa-facebook"></a>
        </li>
        <li>
            <a target="_blank" href="https://www.instagram.com/mqscientifica/" class="btn btn-block btn-social btn-instagram waves-effect waves-light" rel="nofollow">Instagram <span class="fa fa-instagram"></a>
        </li>
    </ul>
</div>

This is what my buttons look now: they have the same color as the footer, and I want them with their own social color

Tags:

2

Answers


  1. 0

    Try putting the icons inside <i> tags and provide the color value to the <i> tag in the CSS. Hope this helps.
    eg:

    CSS:

    `<style>
   i{ color:red;}
 </style>

 <i class="social fa fa-twitter-square" aria-hidden="true"></i> `
    Login or Signup to reply.
  2. 0

    The object you are trying to edit has multiple classes:

    class="btn btn-social btn-twitter waves-effect waves-light"

    This means that that object is a btn, a btn-social, a btn-twitter etc etc.

    This classes are referenced in the css that you are using (Likely Bootstrap or Material design), so a possible solution would be to find the btn-twitter in your css and change the color there.

    Good luck 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search