Issue changing the color of an icon - html

Question

Trying to change the color of an icon within a Bootstrap button. Nothing I've tried has made it turn black, which is what I want it to be. Even after using the "Inspect Element" tool in Chrome and copying the CSS selector verbatim to specifically target the icon hasn't worked. Code is below. This is for a bootcamp course on Udemy and the icon is from 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);
}
Expected results are for the icon to be black as default (which is shown in the tutorial video). The icon actually shows up white, and trying to change the color to black through CSS hasn't worked so far.

Answer 1

Here is a small example :)
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

Now that I've seen your css.
* { color: white; } is causing the problem. you might want to reconsider setting this;
but to fix your problem .fa-paw { color: black !important; } should do it
* { 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>