html - 更改图标颜色的问题

Question

尝试更改 Bootstrap 按钮内图标的颜色。我试过的任何东西都没有让它变黑，这正是我想要的。即使在 Chrome 中使用“Inspect Element”工具并逐字复制 CSS 选择器以专门针对该图标也没有奏效。代码如下。这是 Udemy 上的训练营类(class)，图标来自 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>