更改图标颜色的问题答案

【问题标题】：Issue changing the color of an icon更改图标颜色的问题
【发布时间】：2019-01-09 23:03:25
【问题描述】：

尝试更改 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 将颜色更改为黑色到目前为止还没有奏效。

【问题讨论】：

你的 sn-p 中没有 css，如果它是白色的，那么它就是白色的。请显示完整代码
编辑帖子以添加 CSS。我的问题是，当我检查元素时，它说它是黑色的，当我以多种方式定位它时，比如......这就是我之前尝试过的某种东西的地方。我不知道为什么它以前不起作用。我只是把 .fa-paw { color: black;并且它起作用了，尽管它以前不起作用。 IDK 发生了什么变化，但它现在可以工作了。非常感谢您提供帮助。
你能做一个jsfiddle或codepen吗？这样，我们就可以在那里进行编辑并在那里解决问题。
stackoverflow.com/questions/18334851/…

标签： html css

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

关于 * 在 CSS 中：stackoverflow.com/questions/8715860/what-does-mean-in-css