使用 FontAwesome 5.0 SVG 框架时在图标之间切换

Question

我希望在使用新的 FontAwesome SVG 框架时能够在 Javascript 中的图标之间切换。

以前在旧的 WebFont 方法中，这是通过切换或更改标签上的 class 来实现的，但是由于这些现在在源代码中呈现为 SVG，因此不再有效。

有没有一种不需要在源代码中渲染两个 SVG 图标并使用额外的 classes/CSS 来切换显示的方法？

Answer 1

没有找到任何关于此的文档。由于它尚未正式发布，您可以使用此解决方法 (jQuery):

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

Answer 2

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 更改图标（从 "star" 到 "alarm-clock"，反之亦然）：

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

希望对遇到同样问题的人有所帮助。

Answer 3

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

这会将图标从 eye-slash 更改为 eye。

编辑：2017 年 12 月 20 日
从 Font Awesome 5.0.1 开始，当使用 Javascript 版本时，您现在可以像以前一样 add/remove 类，它只需要在 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');
});

另请注意，任何应用 ids 或类到 font awesome 元素都将被带到 svg。因此，如果你有 <i id='eyecon' class='eyecon fa fa-eye'> 那么它将呈现 <svg id='eyecon' class='eyecon'>.

Answer 4

已通过 FA 5.0.2 验证

我修改了在 Font-Awesome 网站 here 上找到的原始文档。他们网站上的选择器没有选择正确的元素，所以我们需要修改属性。

HTML

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

div 的 class 并不重要，我们可以改变它。查看 javascript，我们正在使用该元素来查找 svg，具体来说，我们正在寻找数据图标属性。一旦我们知道了数据属性，我们就可以在每次点击时更改它。

所以在这种情况下，它从负平方开始。如果图标是减号方块，它会将其更改为加号方块。如果不是正方形，它会将其更改为负方形。

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

Answer 5

假设您在 fontawesome.js sheet 中使用推荐的方法，我在 official documentation:

通过更改 class 来更改图标：

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

Answer 6

我也遇到了同样的问题，我发现（在向右滚动到最后）FontAwesome website 说明如下：

Nest <svg> tags instead of replacing

There may be some cases where the replacement of the <i> tag is just not working out like you need it to.

You can configure Font Awesome to nest the within the tag.

为此，只需 FontAwesomeConfig 对象并设置 autoReplaceSvg: 'nest'。

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

Answer 7

这是我发现最适合我的方法。我使用的是自托管的 Fontawesome v5.7.1

HTML（注意两个图标，一个带有 .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');
});

Answer 8

对于普通的 JS 示例（密码显示）

//event = mouse click
const passwordInput = event.currentTarget
    .closest('.input-group')
    .querySelector('input');
let icon = 'eye-slash';
let newType = 'text';

// type is text, set to password and change icon to eye
if (passwordInput.getAttribute('type') === 'text') {
    icon = 'eye';
    newType = 'password';
}
passwordInput.setAttribute('type', newType);
event.currentTarget
    .querySelector('svg')
    .setAttribute('data-icon', icon);

Answer 9

HTML

<button class="btn btn-primary" id="menu-toggle">
            <span id="menu-arrow-left" class='fa fa-fast-backward' aria-hidden="true"></span>
            <span id="menu-arrow-right" class='fa fa-fast-forward' style="display: none;" aria-hidden="true"></span>
        </button>

Jquery

$("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
      $('#menu-arrow-left').toggle();
      $('#menu-arrow-right').toggle();
    });

我觉得这是最基本、最恰当的解决方案。

使用 FontAwesome 5.0 SVG 框架时在图标之间切换

Switch between icons when using FontAwesome 5.0 SVG Framework

javascript

html

svg

font-awesome

font-awesome-5