JQuery

еюсь, что смогу переключаться между иконками в Javascript при использовании новой инфраструктуры FontAwesome SVG.

Ранее в старом методе WebFont это было достигнуто путем переключения или изменения класса в теге, однако, поскольку теперь они отображаются как SVG в исходном коде, это больше не работает.

Есть ли способ сделать это без необходимости отображать иконки SVG в исходном коде и использовать дополнительные классы / CSS для переключения отображения?

Ответы на вопрос(7)

что я нашел лучше всего для меня. Я использовал Fontawesome v5.7.1

HTML (обратите внимание на две иконки, одна с классом .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');
});

ущен официально, вы можете использовать этот обходной путь (jQuery):

$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>');
 Monbrey17 окт. 2017 г., 05:53
Спасибо за ответ - для этого конкретного приложения я пытаюсь избежать jQuery, но я все еще должен быть в состоянии достигнуть подобного результата, используя сырой Javascript. Я приму это как ответ.

Я изменил оригинальную документацию, найденную на сайте 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');
      };
    });
  });

Решение Вопроса

и переход с 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');
}

Надеюсь, что это поможет любому с той же проблемой.

 fuuman16 июл. 2018 г., 12:09
Мои иконки не изменились, когда я попробовал это. Как вы загружаете свои иконки? Я думаю, мне нужно повторить процесс "i2svg ()".

Проверено в 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'>.

и я обнаружил (после прокрутки до самого конца), чтоFontAwesome веб-сайт заявляет следующее:

Гнездо<svg> теги вместо замены

Могут быть случаи, когда замена<i> тег просто не работает, как вам нужно.

Вы можете настроить Font Awesome для размещения внутри тега.

Для этого простоFontAwesomeConfig объект и наборautoReplaceSvg: 'nest'.

<script>
    FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
 James Moberg26 июн. 2018 г., 23:45
ПРИМЕЧАНИЕ: я использую jQuery, и FA5 рекомендует использовать «гнездо» (вместо замены), но я обнаружил, что это дало отрицательные результаты при использовании «наслоения, текста и фильтров».

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>
 Robert18 апр. 2018 г., 15:00
Подтверждено. Это правильное решение при использовании fontawesome.js с иконками SVG.
 Paulo03 дек. 2018 г., 17:17
Если вы используете jQuery и сталкиваетесь с проблемами, обновитесь до версии 3.x. Я тестировал на сайте, используя 2.1.4, и он не работал. Пообщались с FontAwesome и разобрались в этом.

Ваш ответ на вопрос