无法使用Javascript更改字体真棒图标

时间:2019-07-20 19:32:45

标签: javascript jquery font-awesome

我创建了一个代码来更改svg图标的类。使用Chrome的检查,我可以看到它已按预期将svg类成功地从“ fa-circle”更改为“ fa-check-circle”。但是,图标保持不变,没有任何反应。

 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" )

                    } 
                });
            }

我是否缺少有关svg的信息? 完整的功能在这里:https://pastebin.com/3Dyv25xf

2 个答案:

答案 0 :(得分:0)

我认为jquery正在使用setAttribute()将属性值附加到节点。对于svg,我们必须使用setAttributeNS()方法。

您可以尝试以下代码

$(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

答案 1 :(得分:0)

使用CSS伪元素和伪类:hover。与JS / jQ相比,CSS的处理能力更小,更易于编写和维护,并且IMO的性能更好。请参阅 CSS Pseudo-Elements | Font Awesome

HTML

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

查看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>