在悬停时更改glyphicon（引导程序）

Question

I have an icon:

<span class='glyphicon glyphicon-heart-empty' aria-hidden='true'></span>

On hover, I want the glyphicon to change from heart-empty to:

<span class='glyphicon glyphicon-heart' aria-hidden='true'></span>

And then if the user clicks the icon, the button will have the glyphicon heart and if the users clicks the icon again, it will put its state back to heart-empty .

I have seen this JSfiddle here which on hover, displays an icon, whereas I want it to completely change the icon. I have tried to use the approach in the JSfiddle, but it I cannot get it to do what I want.

Answer 1

You can change the content property of the :before pseudo element to be the that of the icon you want.

Css

span.clicked:before {
  content: "\e005";
} 

By adding a class when you click the icon you can then apply the new icon code.

JS

document.querySelector('span').addEventListener('click', function (e) {
    e.target.classList.toggle('clicked')
});

Demo

Answer 2

You can see an example below

<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>
<div>
<span class='glyphicon glyphicon-heart-empty' data-clicked="false" aria-hidden='true'></span> The Heart
</div>

and javascript part should be like

$("div").click(function() {
        var icon = $("span.glyphicon", this);
        var isClicked = icon.data("clicked");
    icon.data("clicked", !isClicked);
}).hover(function () {
    // hover in      
    var icon = $("span.glyphicon", this);
    var isClicked = icon.data("clicked");
    var remCls = isClicked ? "glyphicon-heart" : "glyphicon-heart-empty",
            addCls = isClicked ? "glyphicon-heart-empty" : "glyphicon-heart"
    icon
        .removeClass(remCls)
      .addClass(addCls);
}, function () {
    // hover out
    var icon = $("span.glyphicon", this);
    var isClicked = icon.data("clicked");
    var remCls = isClicked ? "glyphicon-heart-empty" : "glyphicon-heart",
            addCls = isClicked ? "glyphicon-heart" : "glyphicon-heart-empty"
    icon
        .removeClass(remCls)
      .addClass(addCls);
});

fiddle example: https://jsfiddle.net/88nara7m/1/