Bootstrap字体真棒社交按钮不起作用答案

【问题标题】：Bootstrap Font Awesome Social Buttons not workingBootstrap字体真棒社交按钮不起作用
【发布时间】：2018-01-29 18:56:25
【问题描述】：

我正在为我的网站使用模板，但现在我正在尝试更改社交媒体的按钮。如果我在一个类中指定颜色（例如btn btn-primary），按钮会改变它的颜色。但只有使用btn btn-social btn-twitter它才能获得透明度。我认为这与正在使用的 Bootstrap 模板有关。

我的问题是：在使用 btn btn-social btn-twitter 对象时，是否有某种方法可以强制按钮的颜色？

这是我的代码：

<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>

这是我的按钮现在的样子：

【问题讨论】：

您能否再解释一下问题是什么以及您要达到的目标是什么？
@ovokuro 看看我刚刚做的编辑，我发布了我的按钮现在的样子，我想要强制颜色，使它们像社交媒体一样是蓝色和粉红色代表。谢谢:)
尝试在 CSS 中给出 (color:blue;) 等。它会相应地改变。
@VipulTyagi 我试过了，但没有用。此外，我想保留btn-social的外观，但它不起作用！
添加一个新类并添加一些特殊性，bootstrap 有一个失败或一个非常好的好处（取决于您希望如何看待它），这是在将 css 应用于其元素时非常具体。确保您用于应用颜色的 CSS 规则非常具体。

标签： css twitter-bootstrap font-awesome

【解决方案1】：

尝试将图标放在<i> 标签内，并为CSS 中的<i> 标签提供颜色值。希望这可以帮助。例如：

CSS：

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

 <i class="social fa fa-twitter-square" aria-hidden="true"></i> `

【讨论】：

谢谢，但如果我想要的颜色是来自社交按钮的颜色怎么办！？？每次都不一样

【解决方案2】：

您尝试编辑的对象有多个类：

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

这意味着该对象是 btn、btn-social、btn-twitter 等。

这些类在您正在使用的 css 中被引用（可能是 Bootstrap 或 Material design），因此一个可能的解决方案是在您的 css 中找到 btn-twitter 并在那里更改颜色。

祝你好运:)

【讨论】：