Modify the color of a FlatIcon icon in jquery

Question

I have a FlatIcon icon and i modified it via css like this:

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {

    font-size: 55px;
    color: red;

}

The problem is that i have to modify the color via jquery as well.

I tried several ways, like this:

$('.flaticon-car:before').css('color',"#4286f4");
$('.flaticon-car:after').css('color',"#4286f4");
$('.flaticon-car').css('color',"#4286f4");
$('.flaticon-car:before').css({"color":"#4286f4"});
$('.flaticon-car:after').css({"color":"#4286f4"});
$('.flaticon-car').css({"color":"#4286f4"});

After that, i tried this:

$('.flaticon-car').click(function () {
    $(this).css('color','#4286f4');
});

Nothing worked for me.Do you have any ideea how can i do this?

Use custom CSS class that modifying color of icon and using jquery add that class to element — Mohammad, Nov 12 '18 at 10:45
so, i have this: `` and in js i have this: $('.car-class').css('color','#4286f4'); In inspector i can see that the color is added to the element, but nothing it's happening... — Ioan Andrei, Nov 12 '18 at 10:50
here is the answer you want : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/49618941#49618941 — Temani Afif, Nov 12 '18 at 11:16

score 1 · Accepted Answer · answered Nov 12 '18 at 10:49

1

You can not style :after/before from Jquery

The trick is to toggle class

See example:

$('.className').click(function () {
   $( this ).toggleClass("newClassName");
});

.className:after,.newClassName:after
{
    position: absolute;
    content: '';
    font-size: 55px;
    background: red;
    width: 15px;
    height: 15px;
    left: 120px;
}

.newClassName:after
{
    background: #4286f4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="className"> hello className</div>

answered Nov 12 '18 at 10:49

לבני מלכה

15,925
2
23
47

It did the trick! Thank you very much – Ioan Andrei Nov 12 '18 at 10:56
happy to help :) – לבני מלכה Nov 12 '18 at 10:56
there is a way to style pseudo element with jquery : https://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin/49618941#49618941 – Temani Afif Nov 12 '18 at 11:16
@TemaniAfif nice one (as allways :) ) but `css-variables` not support all browser(I know that pseudo also not...) – לבני מלכה Nov 12 '18 at 11:18
only IE will fail (as usual) but who care about IE ;) – Temani Afif Nov 12 '18 at 11:20
Loll You right... I hate IE(but in my work i must make IE works) – לבני מלכה Nov 12 '18 at 11:20

Modify the color of a FlatIcon icon in jquery

1 Answers1