title: Bootstrap Font Awesome Social Buttons not working
body: <p>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 <code>btn btn-primary</code>) the button changes its color. But only with the <code>btn btn-social btn-twitter</code>it gets transparency. I assume this is related with the Bootstrap template is using.</p>
  
  <p>My question is: is there some way of forcing button's color while using the btn btn-social btn-twitter object?</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;div class="call-to-action"&gt;
      &lt;h4 class="mb-5"&gt;Mamá Quiero Ser Científica&lt;/h4&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;h5&gt;Follow us on our Social Media&lt;/h5&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a target="_blank" href="https://twitter.com/mqscientifica" class="btn btn-social btn-twitter waves-effect waves-light" rel="nofollow"&gt;Twitter &lt;span class="fa fa-twitter"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;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"&gt;Facebook &lt;span class="fa fa-facebook"&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a target="_blank" href="https://www.instagram.com/mqscientifica/" class="btn btn-block btn-social btn-instagram waves-effect waves-light" rel="nofollow"&gt;Instagram &lt;span class="fa fa-instagram"&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is what my buttons look now: <a href="https://i.stack.imgur.com/dDtTq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dDtTq.png" alt="they have the same color as the footer, and I want them with their own social color"></a></p>