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

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

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

---

有没有一种方法可以做到这一点，而无需在源代码中呈现SVG图标，并使用其他类/CSS切换显示？

未找到任何相关文档。 由于尚未正式发布，您可以使用此变通方法（jQuery）：

$（'svg.fa toggle off'）。替换为（“”）；

Font Awesome 5.0.0刚刚发布，从4.7到5.0的迁移破坏了我的javascript/jquery，当用户点击时，将“fa-star-o”图标更改为“fa-star”

我设法修复了它，因此我想与您分享以下两个技巧：

HTML中的图标：

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

2）使用jQuery更改图标样式（从'fas'更改为'far'）：

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

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

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

希望这能帮助任何有同样问题的人。

使用推荐的JS方法加载图标，通过FA 5.0.0进行验证

HTML

这是页面呈现后，单击之前HTML代码的外观：

JQUERY（单击使用）

$（“#图标”）。单击（函数（）{
//将子svg属性数据图标更改为新图标（删除fa-）
$（“#icon>svg”）.attr（'data-icon'，'eye'）；
});

这将把图标从眼斜线更改为眼斜线

编辑：2017年12月20日 从Font Aowesome 5.0.1开始，当使用Javascript版本时，您现在可以像以前一样添加/删除类，它只需要位于svg元素而不是原始元素上（假设i）

更新代码：

$（“#图标”）。单击（函数（）{
//将子svg属性数据图标更改为新图标（删除fa-）
$（“#icon>svg”）.addClass（'fa-eye'）.removeClass（'fa-eye-slash'）；
});

还请注意，任何应用于font-awesome元素的id或类将被带到svg。因此，如果您有

，则它将呈现经FA 5.0.2验证的

我修改了Font Awesome网站上的原始文档。他们网站上的选择器没有选择正确的元素，因此我们需要修改属性

HTML

---

假设您在fontawesome.js工作表中使用了推荐的方法，我在以下页面中找到了此方法：

通过更改类别更改图标：

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

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

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

打开
document.addEventListener（'DOMContentLoaded'，函数（）{
$（'button'）。在（'click'，函数（）{
$（本）
.find（“[data-fa-i2svg]”）
.toggleClass（'fa-angle-down'）
.toggleClass（'fa-角度-右侧'）；
});
});

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

嵌套

标记，而不是替换

在某些情况下 替换

标签的效果并不理想 对

您可以将字体配置为嵌套在标记中

为此，只需使用

FontAwesomeConfig

对象并设置

autoReplaceSvg:'nest'

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

FontAwesomeConfig={autoReplaceSvg:'nest'}

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

HTML（注意两个图标，一个带有.hidden类）

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

对于简单的JS示例（密码泄露）

HTML

---

我觉得这是最基本、最有效的解决方案。

谢谢你的回答-对于这个特定的应用程序，我试图避免使用jQuery，但我仍然可以使用原始Javascript获得类似的结果。我会接受这个答案的。这是将fontawesome.js与SVG图标一起使用时的正确解决方案。如果使用jQuery时遇到问题，请升级到3.x版。我在一个使用2.1.4的站点上进行测试，但它不起作用。注意：我使用jQuery，FA5建议使用“嵌套”（而不是替换），但我发现这样做在使用“分层、文本和过滤器”时会产生不利的结果。我尝试这样做时，我的图标没有改变。如何加载图标？我想我需要重新触发“i2svg（）”进程。

//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);

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

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