0

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.

Heather Zehnder
  • 1
  • 1
  • 1
    there's no css in your snippet, if it's white then something is making it white. Show the full code pls – Velimir Tchatchevsky Jan 09 '19 at 23:06
  • Edited the post to add the CSS. My issue is that when I inspect the element it says it's black when I target it in any number of ways like ... And here's where somehow a thing I tried before worked. I have no idea why it didn't work before. I just put .fa-paw { color: black; } and it worked, despite it not working before. IDK What changed but it's working now. Thanks very much for trying to help. – Heather Zehnder Jan 09 '19 at 23:11
  • can you make a jsfiddle or a codepen plz. that way, we can edit on there and fix the problem there. – Bob Jan 09 '19 at 23:12
  • https://stackoverflow.com/questions/18334851/change-the-color-of-glyphicons-to-blue-in-some-but-not-at-all-places-using-boot – Bob Jan 09 '19 at 23:14

2 Answers2

0

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>
katty azabache
  • 1
-1

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>
jcal
  • 871
  • 5
  • 14