css - Bootstrap Font Awesome Social Buttons 不起作用

Question

我正在为我的网站使用模板，但现在我正在尝试更改社交媒体的按钮。如果我在类中指定颜色(例如 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>

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

Answer 1

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

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

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

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

祝你好运:)