Geek Answers Handbook

Switch between icons when using FontAwesome 5.0 SVG Framework

I am looking to be able to switch between icons in Javascript when using the new FontAwesome SVG framework.

Earlier in the old WebFont method, this was achieved by switching or changing the class in the tag, however, since they are now displayed as SVG in the source code, this no longer works.

Is there a way to do this without having to display both SVG icons in the source code and use extra classes / CSS to switch the display?

+13
source share
8 answers

Font Awesome 5.0.0 , 4.7 5.0 javascript/jquery, "fa-star-o" "fa-star", .

, :

HTML:

<i class="foo fas fa-star"></i>

1) jQuery ( "" "" ):

var icon = $('.foo');
var icon_fa_icon = icon.attr('data-icon');

if (icon_fa_icon === "alarm-clock") {
    icon.attr('data-icon', 'star');
} else {
    icon.attr('data-icon', 'alarm-clock');
}

2) jQuery ( 'fas' 'far'):

var icon = $('.foo');
var icon_fa_prefix = icon.attr('data-prefix');

if (icon_fa_prefix === 'fas') {
    icon.attr('data-prefix', 'far');

} else {
    icon.attr('data-prefix', 'fas');
}

, .

+15

FA 5.0.2

, Font-Awesome . , .

HTML

<div class='icon'><i class='far fa-minus-square'></i></div>

div , . javascript, svg , , data-icon. , .

-. -, -. -, -.

JQuery

  document.addEventListener('DOMContentLoaded', function () {
    $('.icon').on('click', function () {
      if ($(this).find('svg').attr('data-icon') == 'minus-square' ) {
        $(this).find('svg').attr('data-icon', 'plus-square');
      } else {
        $(this).find('svg').attr('data-icon', 'minus-square');
      };
    });
  });
+7

, ( ), - FontAwesome :

<svg> <svg>

<i> , .

Font Awesome .

FontAwesomeConfig autoReplaceSvg: 'nest'.

<script>
    FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
+5

. , (jQuery):

$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>');
+4

, fontawesome.js, :

:

<button>Open up <i class="fa fa-angle-right"></i></button>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('button').on('click', function () {
      $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-angle-down')
        .toggleClass('fa-angle-right');
    });
  });
</script>
+4

FA 5.0.0 JS

HTML

<div id='icon'><i class='far fa-eye-slash'></i></div>

, HTML- , , :

<div id="icon"><svg class="svg-inline--fa fa-eye-slash fa-w-18" aria-hidden="true" data-fa-processed="" data-prefix="far" data-icon="eye-slash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M272.702 359.139c-80.483-9.011-136.212-86.886-116.93-167.042l116.93 167.042zM288 392c-102.556 0-192.092-54.701-240-136 21.755-36.917 52.1-68.342 88.344-91.658l-27.541-39.343C67.001 152.234 31.921 188.741 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.004 376.006 168.14 440 288 440a332.89 332.89 0 0 0 39.648-2.367l-32.021-45.744A284.16 284.16 0 0 1 288 392zm281.354-111.631c-33.232 56.394-83.421 101.742-143.554 129.492l48.116 68.74c3.801 5.429 2.48 12.912-2.949 16.712L450.23 509.83c-5.429 3.801-12.912 2.48-16.712-2.949L102.084 33.399c-3.801-5.429-2.48-12.912 2.949-16.712L125.77 2.17c5.429-3.801 12.912-2.48 16.712 2.949l55.526 79.325C226.612 76.343 256.808 72 288 72c119.86 0 224.996 63.994 281.354 159.631a48.002 48.002 0 0 1 0 48.738zM528 256c-44.157-74.933-123.677-127.27-216.162-135.007C302.042 131.078 296 144.83 296 160c0 30.928 25.072 56 56 56s56-25.072 56-56l-.001-.042c30.632 57.277 16.739 130.26-36.928 171.719l26.695 38.135C452.626 346.551 498.308 306.386 528 256z"></path></svg><!-- <i class="far fa-eye-slash"></i> --></div>

JQUERY ( )

$("#icon").click(function() {
  // Change the child svg attribute data-icon to the new icon (remove fa-)
  $("#icon > svg").attr('data-icon','eye');
});

.

: 20 2017
Font Awesome 5.0.1, Javascript / -, svg, ( i).

:

$("#icon").click(function() {
  // Change the child svg attribute data-icon to the new icon (remove fa-)
  $("#icon > svg").addClass('fa-eye').removeClass('fa-eye-slash');
});

, svg. , <i id='eyecon' class='eyecon fa fa-eye'>, <svg id='eyecon' class='eyecon'>.

+3

, ( ) . :

$(".myItem").toggleClass("fa-chevron-circle-up fa-chevron-circle-down");
0

, .

HTML (note the two icons, one with the .hidden class)

<a id="delete_btn" href="#">
  <i class="icon fas fa-trash"></i>
  <i class="spinner fas fa-spinner fa-spin hidden"></i>
  <div class="caption">Delete</div>
</a>

CSS

.hidden {
  display: none;
}

JQuery

$('#delete_btn').click( function() {
  var fa_icon = $('#delete_btn .icon');
  var fa_spin = $('#delete_btn .spinner');
  fa_icon.addClass('hidden');
  fa_spin.removeClass('hidden');

  //do something

  fa_spin.addClass('hidden');
  fa_icon.removeClass('hidden');
});
0
source

More articles:


All Articles