Question

尝试更改Bootstrap按钮中图标的颜色。我没有尝试过使它变黑，这就是我想要的。即使在Chrome浏览器中使用了“检查元素”工具并逐字复制CSS选择器以专门定位图标后，也无法正常工作。代码如下。这是有关Udemy的训练营课程，图标来自Font Awesome。

<div class="container">
    <div class="row">
        <div class="col-lg-12">
        <div id="content">
            <h1>Purrfect Match</h1>
            <h3>The Only Human/Feline Dating App</h3>
            <hr>
            <button class="btn btn-default btn-lg"><i class="fas fa-paw"></i>Get Started!</button>
        </div>
        </div>
    </div>
</div>

html {
    height: 100%;
}

* {
    font-family: 'Rubik';
    color: white;
}

body {
    background: url(https://source.unsplash.com/gI_1GPoKGRs);
    background-size: cover;
    background-position: center;
}

#content {
    text-align: center;
    padding-top: 25%;
}

div h1 {
    font-weight: 700;
    font-size: 5em;
}

hr {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,.2);
}

该图标的默认结果是黑色（默认情况下为黑色）（在教程视频中显示）。该图标实际上显示为白色，到目前为止，通过CSS尝试将颜色更改为黑色尚无济于事。

Answer 1

这是一个小例子：）

jQuery(".btn-example").click(function(){
    jQuery(".btn-example").toggleClass('active'); 
   });

.btn-example.active { 
  background-color: skyblue;
}
.btn-example.active i{ 
  color: purple;
}
.btn-example.focus, .btn-example:focus {
    outline: none !important;
    box-shadow: initial !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
        <div id="content">
            <hr>
            <button class="btn-example btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
        </div>
        </div>
    </div>
</div>

Answer 2

现在，我已经看到了您的CSS。

* { color: white; }引起了问题。您可能需要重新考虑设置此设置；

但是要解决您的问题，.fa-paw { color: black !important; }应该解决

* { color: white; }
.fa-paw { color: black !important; }

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="col-lg-12">
        <div id="content">
            <h1>Purrfect Match</h1>
            <h3>The Only Human/Feline Dating App</h3>
            <hr>
            <button class="btn btn-default btn-lg"><i class="fas fa-paw"></i> Get Started!</button>
        </div>
        </div>
    </div>
</div>

更改图标颜色的问题

2 个答案: