我期望能够在使用新的FontAwesome SVG框架的Javascript中切换图标。当使用FontAwesome 5.0 SVG框架时在图标之间切换
以前在旧的WebFont方法中,这是通过切换或更改标签上的类来实现的,但是由于SVG在源代码中的显示不再有效,所以这些都已经呈现。
有没有办法做到这一点,而不需要在源代码中呈现两个SVG图标并使用其他类/ CSS切换显示?
我期望能够在使用新的FontAwesome SVG框架的Javascript中切换图标。当使用FontAwesome 5.0 SVG框架时在图标之间切换
以前在旧的WebFont方法中,这是通过切换或更改标签上的类来实现的,但是由于SVG在源代码中的显示不再有效,所以这些都已经呈现。
有没有办法做到这一点,而不需要在源代码中呈现两个SVG图标并使用其他类/ CSS切换显示?
字体真棒5.0.0刚刚被释放,从4.7到5.0的迁移击毁了我的JavaScript/jQuery的改变“当用户点击它时,“fa-star-o”图标变为“fa-star”。
我设法解决它,所以我想与你们这两个小技巧分享:
在HTML中的图标:用jQuery
<i class="foo fas fa-star"></i>
1)更改图标(从“明星”到“闹钟”,反之亦然):
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” 到 “远”):
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');
}
希望能帮助任何有同样问题的人。
没有找到关于此的任何文档。 因为它不是offically尚未公布,你可以使用此解决方案(jQuery的):
$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>');
验证与FA 5.0.0使用加载图标
HTML
<div id='icon'><i class='far fa-eye-slash'></i></div>
这是HTML代码的样子,一旦呈现页面,点击之前推荐的JS方法:
<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');
});
这会将图标从斜眼更改为眼。
编辑:二○一七年十二月二十日
由于字体真棒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');
});
还应注意,任何施加IDS或类到字体真棒元件将被带到转移到SVG。因此,如果你有<i id='eyecon' class='eyecon fa fa-eye'>
那么它会渲染<svg id='eyecon' class='eyecon'>
。
与FA 5.0.2
验证我修改的字体 - 真棒网站here发现原来的文档。他们网站上的选择器没有选择正确的元素,所以我们需要修改属性。
HTML
<div class='icon'><i class='far fa-minus-square'></i></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');
};
});
});
感谢您的答案 - 这个特殊的应用程序,我试图避免的jQuery,但我仍然应该能够实现使用原始的Javascript类似的结果。我会接受这个答案。 – Monbrey