我希望能够在使用新的FontAwesome SVG框架时,在Javascript中切换图标。
以前在旧的WebFont方法中,这是通过切换或更改标签上的类来实现的,但是由于这些现在在源代码中呈现为SVG,因此这种方法不再起作用。
是否有一种方法可以在不需要在源代码中呈现两个SVG图标和使用额外的类/CSS来切换显示的情况下完成这个需求?
我希望能够在使用新的FontAwesome SVG框架时,在Javascript中切换图标。
以前在旧的WebFont方法中,这是通过切换或更改标签上的类来实现的,但是由于这些现在在源代码中呈现为SVG,因此这种方法不再起作用。
是否有一种方法可以在不需要在源代码中呈现两个SVG图标和使用额外的类/CSS来切换显示的情况下完成这个需求?
刚刚发布了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更改图标(从“星星”到“闹钟”,反之亦然):
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');
}
希望这能帮助到有同样问题的人。
已验证使用 FA 5.0.2
我修改了在Font-Awesome网站上找到的原始文档这里。他们网站上的选择器未选择正确的元素,因此我们需要修改属性。
HTML
<div class='icon'><i class='far fa-minus-square'></i></div>
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');
};
});
});
<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>
要这样做,只需使用嵌套
<svg>
标签而不是替换有些情况下,替换
<i>
标签可能并不如你所需。你可以配置 Font Awesome 使其将
<svg>
嵌套在<i>
标签中。
FontAwesomeConfig
对象并设置 autoReplaceSvg: 'nest'
。<script>
FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>
没有找到关于这个的任何文档。 由于它还没有正式发布,您可以使用此解决方法(jQuery):
$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>');
使用建议的JS方法加载图标,在FA 5.0.0中已验证
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(使用 onClick)
$("#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 版本时,您现在可以像以前一样添加/删除类,只需添加到 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');
});
还要注意,应用于Font Awesome元素的任何id或class都将被带到svg中。因此,如果您有<i id='eyecon' class='eyecon fa fa-eye'>
,那么它将呈现为<svg id='eyecon' class='eyecon'>
。
这是我发现对我最有效的方法。我使用自托管的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');
});
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();
});
我觉得这是最基本和恰当的解决方案。
对于一个纯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);