webentwicklung-frage-antwort-db.com.de

Wechseln Sie zwischen den Symbolen, wenn Sie FontAwesome 5.0 SVG Framework verwenden

Ich freue mich darauf, in Javascript zwischen den Icons wechseln zu können, während ich das neue FontAwesome SVG-Framework verwende.

Bisher wurde dies in der alten WebFont-Methode durch das Umschalten oder Ändern der Klasse für das Tag erreicht. Da diese nun jedoch im Quellcode als SVGs gerendert werden, funktioniert dies nicht mehr.

Gibt es eine Möglichkeit, dies zu tun, ohne dass beide SVG-Symbole im Quellcode dargestellt werden müssen und zusätzliche Klassen/CSS zum Umschalten der Anzeige verwendet werden müssen?

13
Monbrey

Font Awesome 5.0.0 wurde gerade veröffentlicht und die Migration von 4.7 auf 5.0 hat mein Javascript/Jquery zerstört, um ein "fa-star-o" -Icon in "fa-star" zu ändern, wenn der Benutzer darauf klickt.

Ich habe es geschafft, das Problem zu beheben, deshalb wollte ich Ihnen diese beiden Tipps mitteilen:

Das Symbol in HTML:

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

1) Symbol mit jQuery ändern (von "Stern" in "Wecker" und umgekehrt):

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) Ändere den Icon-Stil mit jQuery (von 'fas' in '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');
}

Hoffe das hilft jedem bei dem gleichen Problem.

18
Pascal

Verifiziert mit FA 5.0.2

Ich habe die Originaldokumentation auf der Font-Awesome-Website hier geändert. Die Auswahl auf ihrer Website hat nicht das richtige Element ausgewählt. Daher müssen wir das Attribut ändern. 

HTML

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

Die Klasse des Divs ist nicht so wichtig, wie wir sie ändern können. Wenn wir das Javascript betrachten, verwenden wir das Element, um das SVG zu finden, und suchen insbesondere nach dem Attribut "data-icon". Sobald wir das Datenattribut kennen, können wir es jedes Mal ändern, wenn es angeklickt wird.

In diesem Fall beginnt es also mit dem Minus-Quadrat. Wenn das Symbol das Minus-Quadrat ist, wird es in das Plus-Quadrat geändert. Wenn es nicht das Plus-Quadrat ist, ändert es sich in das Minus-Quadrat. 

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

Ich hatte das gleiche Problem und fand (nachdem ich ganz nach rechts gescrollt habe), dass die FontAwesome-Website Folgendes angibt:

Verschachteln Sie <svg>-Tags, anstatt zu ersetzen.

Es kann Fälle geben, in denen die Das Ersetzen des <i>-Tags funktioniert nicht so, wie Sie es brauchen zu.

Sie können Font Awesome so konfigurieren, dass das innerhalb des Tags verschachtelt wird.

Dazu einfach das FontAwesomeConfig-Objekt und autoReplaceSvg: 'nest' setzen.

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

Angenommen, Sie verwenden die empfohlene Methode mit der Datei fontawesome.js. Ich habe dies auf der offiziellen Dokumentation gefunden:

Ändern von Symbolen durch Ändern der Klasse:

<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

Es wurde keine Dokumentation zu diesem Thema gefunden. Da es noch nicht offiziell veröffentlicht wurde, können Sie diese Problemumgehung (jQuery) verwenden:

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

Verifiziert mit FA 5.0.0 unter Verwendung der empfohlenen JS-Methode zum Laden von Symbolen

HTML

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

So sieht der HTML-Code aus, nachdem die Seite vor einem Klick gerendert wurde:

<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 (auf Klick verwendet)

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

Dies ändert das Symbol von Auge-Schrägstrich zu Auge

Edit: 20. Dezember 2017
... Ab Font Awesome 5.0.1 können Sie jetzt bei Verwendung der Javascript-Version Klassen wie zuvor hinzufügen/entfernen. Es muss lediglich das Element svg und nicht das ursprüngliche Element sein (vorausgesetzt, i). 

Aktualisierter Code:

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

Beachten Sie auch, dass alle angewendeten ids oder Klassen für das font awesome -Element auf das svg übertragen werden. Wenn Sie also <i id='eyecon' class='eyecon fa fa-eye'> haben, wird der <svg id='eyecon' class='eyecon'> gerendert.

3
Mario Lurig

Das ist, was ich am besten für mich gearbeitet habe. Ich habe selbst gehostete Fontawesome v5.7.1 verwendet

HTML (beachten Sie zwei Icons, eines mit .hidden Klasse)

<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