Can't change font awesome icon with Javascript

Question

I created a code that changes the class of an svg icon. Using Chrome's inspect I can see that it has sucessfully changed svg class from 'fa-circle' to 'fa-check-circle as intended. However the icon remains the same and nothing happens.

 function mouseOverEffect() {
                //JQUERY, FIND A VANILLA JS SOLUTION?
                $("#inbox-circle").mouseover(function() {                    
                    console.log($(this).hasClass('fa-circle'))
                    if ($(this).hasClass('fa-circle')) {                                              
                        $(this).removeClass( "fa-circle" ).addClass( "fa-check-circle" )

                    } 
                });
            }

Is there something about svg's that I'm missing? The complete function is here: https://pastebin.com/3Dyv25xf

Answer 1

I think jquery is using setAttribute() for attaching property value to node. For svg we have to use setAttributeNS() method.

Can you try the below code

$(this).removeClass( "fa-circle" ) ;// After this code
//.addClass( "fa-check-circle" ) // comment this code

$(this)[0].setAttributeNS(null, "class", "far fa-check-circle" ); // add this line

Answer 2

Use CSS pseudo-elements and pseudo-class :hover . CSS incurs less processing power than JS/jQ, it's simpler to write and maintain, and IMO performs better. Refer to CSS Pseudo-Elements | Font Awesome

HTML

<i class="icon circle"></i>

See Demo for CSS

 :root { font: 5vw/1.2 Verdana; } .icon::before { display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; font-family: "Font Awesome 5 Free"; } .circle::before { font-weight: 400; content: "\\f111"; } .circle:hover::before { font-weight: 400; content: "\\f058"; cursor: pointer; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet" crossorigin="anonymous"> <ul class='inbox'> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:red"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-21-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:gold"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-24-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:blue"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-29-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> <li class="row inbox-item"> <div class="col-2 col-lg-2"><i class="icon circle" style="color:gold"></i></div> <div class="col-4 col-lg-6">test </div> <div class="col-4 col-lg-2">07-25-19</div> <div class="col-2 col-lg-2 task-actions"><i class="fas fa-ellipsis-h"></i></div> </li> </ul>