web-dev-qa-db-fra.com

Basculer entre les icônes avec l'utilisation de FontAwesome 5.0 SVG Framework

Je cherche à pouvoir basculer entre les icônes en Javascript tout en utilisant le nouveau cadre SVG de FontAwesome.

Auparavant, dans l'ancienne méthode WebFont, cela était possible en basculant ou en modifiant la classe sur la balise. Toutefois, comme celles-ci sont maintenant restituées en tant que SVG dans le code source, cela ne fonctionne plus.

Y a-t-il un moyen de faire cela sans avoir à rendre les deux icônes SVG dans le code source et à utiliser des classes/CSS supplémentaires pour basculer l'affichage?

javascripthtmlsvgfont-awesomefont-awesome-5
13
Monbrey

Font Awesome 5.0.0 vient de paraître et la migration de la version 4.7 à la version 5.0 a anéanti mon javascript/jquery pour remplacer l'icône "fa-star-o" par "fa-star" lorsque l'utilisateur clique dessus.

J'ai réussi à résoudre ce problème et je voulais partager avec vous ces deux conseils:

L'icône en HTML:

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

1) Changer l'icône avec jQuery (de "étoile" à "réveil" et vice versa): 

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) Changer le style de l'icône avec jQuery (de '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');
}

Espérons que cela aide n'importe qui avec le même problème.

18
Pascal

Vérifié avec FA 5.0.2

J'ai modifié la documentation originale disponible sur le site Web de Font-Awesome ici . Le sélecteur sur leur site Web ne sélectionnait pas le bon élément, nous devons donc modifier l'attribut. 

HTML

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

La classe de la div n'a pas tellement d'importance que nous pouvons la changer. En regardant javascript, nous utilisons l'élément pour trouver le svg et plus précisément, nous recherchons l'attribut data-icon. Une fois que nous connaissons l'attribut de données, nous pouvons le changer à chaque fois que vous cliquez dessus.

Donc, dans ce cas, cela commence par le carré négatif. Si l'icône est le carré négatif, elle est remplacée par le carré positif. Si ce n'est pas le carré plus, il sera remplacé par le carré moins. 

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');
      };
    });
  });

8
Steven

J’ai eu le même problème aussi et j’ai trouvé (après avoir fait défiler jusqu’à la fin) que le site Web FontAwesome indique ce qui suit:

Nest <svg> tags au lieu de remplacer

Il peut y avoir des cas où le Le remplacement de la balise <i> ne fonctionne tout simplement pas comme vous en avez besoin à.

Vous pouvez configurer Font Awesome pour imbriquer le dans la balise.

Pour ce faire, il suffit d'utiliser l'objet FontAwesomeConfig et de définir autoReplaceSvg: 'nest'.

<script>
    FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
6
csb

En supposant que vous utilisiez la méthode recommandée avec la feuille fontawesome.js, je l’ai trouvée dans la documentation officielle :

Changer d'icônes en changeant de classe:

<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>
5
nicozica

Nous n'avons trouvé aucune documentation à ce sujet . Comme elle n'est pas encore officiellement publiée, vous pouvez utiliser cette solution de contournement (jQuery):

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

Vérifié avec FA 5.0.0 à l'aide de la méthode JS recommandée pour le chargement des icônes}

HTML

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

Voici à quoi ressemble le code HTML une fois la page rendue, avant un clic:

<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 (sur le clic utilisé)

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

Cela changera l'icône de eye-slash à eye . 

Edit: 20 déc. 2017
À partir de Font Awesome 5.0.1, lorsque vous utilisez la version Javascript, vous pouvez maintenant ajouter/supprimer des classes comme auparavant, il vous suffit de placer l'élément svg plutôt que l'élément d'origine (en supposant que je). 

Code mis à jour:

$("#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');
});

Notez également que tout élément ids ou classes appliqué à l'élément awesome font sera déplacé vers le svg . Ainsi, si vous avez <i id='eyecon' class='eyecon fa fa-eye'>, il restituera le <svg id='eyecon' class='eyecon'>.

3
Mario Lurig

C'est ce que j'ai trouvé qui fonctionnait le mieux pour moi. J'utilisais Fontawesome v5.7.1 auto-hébergé

HTML (notez deux icônes, une avec la classe .hidden)

<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
Pawel