CODEWITHSUNDEEP
javascriptjqueryhtmlcssfont-awesome
artworkjpm
artworkjpm

Reputation: 1337

I can't select font-awesome element using jquery

COMPLETE CODE IN FIDDLE LINE 36 JAVASCRIPT IS ISSUE PART https://jsfiddle.net/ybp7gtup/7/

I want to change the color of the icon using js or jquery as I am using form validation to change color on user behaviour. I can't seem to select the <i> in the DOM, can anyone advise?

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');

Upvotes: 3

Views: 2172

Answers (5)

William B
William B

Reputation: 11

It was weird, but jquery would randomly not select certain elements (or that is what appeared to be happening). Regular js would select the element, and a few times I just plowed on, but in one case I really wanted to use jQuery's toggle(). I couldn't even figure out how to search for an answer until it dawned on me that it wasn't random at all, but always font awesome classes where jQuery failed (but produced no errors).

After struggling all day with this, I stumbled across this article that seems to address this issue. It sounds like font awesome is affecting something in the element, which makes the jquery statements not work as expected. I believe the work-arounds given in the article are going to work, but i haven't tested them yet.

https://fontawesome.com/how-to-use/on-the-web/using-with/jquery

ABE: So, the article says that the font-awesome script seeks out the tags with the fontawesome classes (fas, fa, etc) and REPLACES them with , so it suggested adding an extra js reference that would cause fontawesome to NEST the tags inside the original tags. Sounded like a winner, but it didn't work for me.

Then I found THIS article on fontawesome's site that shows how to use fontawesome via css pseudoelements, and I thought that would work, but it did not.

Frankly, at this point, I'm ready to just use icon images. I'm not very good at javascript or jquery and this is way more complicated than it seems like it should be.

* UPDATE *

I was not preceding the class name selector with a "." in the jQuery. so, for example, I was writing $('icon') when I should have written $('.icon'). Man, like a day and half wasted over a stupid dot. EVERY method works fine if the class name selector is typed in correctly.

Upvotes: 1

V. B.
V. B.

Reputation: 1

Tested your code in a jsfiddle, it works. You might have forgotten to include JQuery into your document header. For example: <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

Upvotes: 0

FlipFloop
FlipFloop

Reputation: 1264

Just add an ID. and 

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

then with jQuery:

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

This should work!

Upvotes: 1

elreeda
elreeda

Reputation: 4597

Try with to edit the fa-color class ( no need to use jquery )

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

Upvotes: 1

tao
tao

Reputation: 90068

Your assumption that the jQuery is not working is wrong. Your problem is that your selector is (most likely) weaker than the one applying the color property on the element when it has both fa-color and red classes. This should work:

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

Upvotes: 1

Related Questions