Wechseln zwischen Symbolen bei der Verwendung von FontAwesome 5.0 SVG-Framework

Ich bin auf der Suche werden in der Lage, wechseln zwischen den icons im Javascript-während der Verwendung der neuen FontAwesome SVG-framework.

Zuvor in der alten WebFont Methode, dies wurde erreicht durch Umschalten oder ändern der Klasse auf den tag, aber da diese jetzt so dargestellt, als SVG ' s in der source-code dieser funktioniert nicht mehr.

Gibt es eine Möglichkeit, dies zu tun, ohne zu machen sowohl SVG-Symbole im Quellcode und die Verwendung zusätzlicher Klassen/CSS ausblenden?

InformationsquelleAutor Monbrey | 2017-09-14

20

Font Awesome 5.0.0 ist gerade veröffentlicht worden und die migration von 4.7 auf 5.0 ruiniert mein javascript/jquery zu ändern, eine "fa-star-o" - Symbol, um "fa-star", wenn der Benutzer darauf klickt.

Habe ich es geschafft, es zu beheben, deshalb wollte ich mit Ihnen teilen diese zwei Tipps:

Das Symbol im HTML-Format:
```
<i class="foo fas fa-star"></i>
```
1) Symbol Ändern mit jQuery (aus "Stern" auf "Wecker" und 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) Ändern icon-Stil mit jQuery (aus 'fas' zu 'weit'):
```
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 jemand mit dem gleichen Problem.
- Meine icons nicht ändern, wenn ich versucht. Wie wollen Sie laden Ihre icons? Ich glaube, ich muss zur Aufzeichnung der "i2svg ()" - Prozess.
InformationsquelleAutor Pascal
8

Geprüft mit FA 5.0.2

Modifizierte ich die original-Dokumentation finden Sie auf Font-Awesome website hier. Die Auswahl auf deren website war nicht die Auswahl der geeigneten element, so müssen wir das Attribut ändern.

HTML

HTML:
```
<div class='icon'><i class='far fa-minus-square'></i></div>
```
Die Klasse von dem div nicht wirklich wichtig, so viel wie wir es ändern können. Blick auf die javascript verwenden wir das element zu finden, das svg und speziell, suchen wir für den data-icon-Attribut. Sobald wir wissen, dass das data-Attribut, können wir es ändern, jedes mal, wenn darauf geklickt wird.

So, in diesem Fall, es beginnt mit der minus-square. Wenn das Symbol für das minus-square, es ändert an den plus-square. Wenn es nicht die plus-Platz, wird es ändern Sie es in die minus-square.

JQuery

JS:
```
  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');
      };
    });
  });
```
InformationsquelleAutor Steven
6

Vorausgesetzt, Sie verwenden die empfohlene Methode mit dem fontawesome.js Blatt, ich fand dieses auf der offizielle Dokumentation:

Ändern Symbole 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>
```
- Bestätigt. Das ist die richtige Lösung bei der Verwendung von fontawesome.js mit SVG-icons.
- Wenn Sie mit jQuery und Probleme ein upgrade auf version 3.x. Ich wurde getestet auf einer Website mit 2.1.4 und es funktionierte nicht. Plauderte mit FontAwesome und dachte, dieses heraus.
InformationsquelleAutor nicozica
6

Ich hatte das gleiche problem auch, und ich fand (nach rechts scrollen, um ganz am Ende), dass die FontAwesome Webseite besagt Folgendes:

Nest <svg> - tags, statt Sie zu ersetzen

Möglicherweise gibt es einige Fälle, in denen die
Ersatz der <i> tag ist, es funktioniert einfach nicht heraus, wie man es braucht
zu.

Können Sie konfigurieren, Font Awesome zu brüten, die Sie in den tag.

Dazu einfach die FontAwesomeConfig - Objekt und stellen Sie autoReplaceSvg: 'nest'.
```
<script>
    FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
```
- HINWEIS: ich benutze jQuery und FA5 empfiehlt die Verwendung von "nest" (statt ersetzen), aber ich entdeckte, dass dies zu tun hatten negative Ergebnisse bei der Verwendung von "layering, text und Filter".
InformationsquelleAutor csb
4

Nicht finden, eine Dokumentation über diese.
Da es nicht offiziell veröffentlicht, aber Sie können diese Problemumgehung verwenden (jQuery):
```
$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>');
```
- Danke für die Antwort - für diese bestimmte app, die ich bin versucht zu vermeiden, jQuery, aber ich sollte immer noch möglich sein ein ähnliches Ergebnis erzielen mit raw-Javascript. Ich nehme das als Antwort.
InformationsquelleAutor Blitzlord

Geprüft mit FA 5.0.0 über die empfohlene JS-Methode für das laden von icons

HTML

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

Dies ist, was der HTML-code aussieht, wenn die Seite gerendert wird, wird vor einem Klick:

<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 ("beim klicken verwendet)

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

Dies wird sich ändern, das Symbol von Auge-Schrägstrich zu Auge.

Edit: Dec 20, 2017

Als der Font-Awesome 5.0.1, wenn Sie mit der Javascript-version können Sie nun hinzufügen/entfernen von Klassen nach wie vor, es muss nur auf die svg element, anstatt das ursprüngliche element (vorausgesetzt ich).

Aktualisierten 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 verwendeten ids oder Klassen zu den font-awesome-element eingeleitet werden, über die svg. Also, wenn Sie haben <i id='eyecon' class='eyecon fa fa-eye'> dann machen wird es die <svg id='eyecon' class='eyecon'>.

InformationsquelleAutor Mario Lurig

Dies ist, was ich gefunden habe funktionierte für mich am besten. Ich war mit self-hosted-Fontawesome v5.7.1

HTML (Hinweis: zwei Symbole, eines mit .versteckte 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');
});

InformationsquelleAutor Pawel

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.