我不能使用jquery选择font-awesome元素

Question

第36行JAVASCRIPT中的完整代码是https://jsfiddle.net/ybp7gtup/7/的问题部分

我想使用js或jquery更改图标的颜色，因为我正在使用表单验证来更改用户行为的颜色。我似乎不能在DOM中选择<i>，有人能给我建议吗？

html：

<div class="col-xs-1 col-md-1 icons-div">
        <div class="row">
            <i class="fa fa-user fa-color"></i>
         </div>
 </div>

CSS：

select:invalid {
    outline: none;
    box-shadow: 0 0 5px red;
}

select:valid {
    outline: none;
    box-shadow: 0 0 5px #449d44;
}

.fa {
    font-size: 3em;
}

.fa-calendar {
    font-size: 2.5em;
}

.hide-div .fa {
    font-size: 1em;
}

.red {
    color: #FFA5A5;
}

.green {
    color: #449d44;
}

jquery：

$('.fa-color').addClass('red');

Answer 1

您认为jQuery不工作的假设是错误的。您的问题是，当元素同时具有fa-color和red类时，您的选择器(很可能)弱于在元素上应用color属性的选择器。这应该是可行的：

.fa-color.red {
    color: #FFA5A5;
}

Answer 2

尝试使用编辑fa-color类(不需要使用jquery )

.fa-color{
   color: #FFA5A5 !important;
}

Answer 3

只需添加一个ID.。和

<div class="col-xs-1 col-md-1 icons-div">
    <div class="row">
        <i class="fa fa-user" id = "color_guy"></i>
     </div>
</div>

然后使用jQuery：

$(document).ready(function() {
    $('#color_guy').addClass('red');
)};

这应该行得通！