FA5 折叠上的切换图标答案

【问题标题】：FA5 Toggle Icon on CollapseFA5 折叠上的切换图标
【发布时间】：2017-12-08 07:18:38
【问题描述】：

我正在从 FA4 过渡到 FA5，并且我的一些旧代码不再有效。

当Bootstrap4 Collapse component 被触发时，我之前使用下面的代码从向下箭头转换为向右箭头。现在我使用的是 SVG-JS FA5，它不再能够更改图标。我很欣赏图标代码已经改变，但这在这种情况下并没有什么不同。

<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  <i class="fa" style="margin-right:15px"></i>Orders <span class="badge badge-light">(9)</span>
</a>

......

[data-toggle="collapse"] i:before{
  content: "\f078";
}

[data-toggle="collapse"].collapsed i:before{
  content: "\f054";
}

任何想法如何在触发折叠组件时轻松自动更改 FA5 图标？我可以用 JQuery 暴力破解它，但它会很难看，而且我认为有更好的方法可用。

谢谢斯蒂芬

【问题讨论】：

标签： font-awesome font-awesome-5

【解决方案1】：

在 Fa5 中有一些相当大的变化，因为图标实际上被换成了 svg，你必须操纵 dom 来进行你正在寻找的更改。（不如你的css类方便）。所以在这个例子中，Bootstrap 提供了在菜单被触发时触发的方法：

如果您背负事件，您可以触发您的类更改（类更改必须在 svg 元素上）

$('a[data-toggle]').on('show.bs.collapse', '#my-main-menu-name', function(){
  //this is the anchor tag you triggered
  $(this).find('svg[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');
})

Fa5 将传统的图标标签替换为 svg 标签：

<svg class="svg-inline--fa fa-thumbs-up fa-w-16" aria-hidden="true" data-prefix="far" data-icon="thumbs-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"></path></svg>
<!-- <i class="far fa-thumbs-up"></i> -->

如果您仍想保留图标标签，您可以在加载字体真棒库之前在标题中的脚本标签中设置选项

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

输出：

<i class="" data-fa-i2svg="">
<svg class="svg-inline--fa fa-thumbs-down fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="thumbs-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M0 56v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56zm40 200c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24zm272 256c-20.183 0-29.485-39.293-33.931-57.795-5.206-21.666-10.589-44.07-25.393-58.902-32.469-32.524-49.503-73.967-89.117-113.111a11.98 11.98 0 0 1-3.558-8.521V59.901c0-6.541 5.243-11.878 11.783-11.998 15.831-.29 36.694-9.079 52.651-16.178C256.189 17.598 295.709.017 343.995 0h2.844c42.777 0 93.363.413 113.774 29.737 8.392 12.057 10.446 27.034 6.148 44.632 16.312 17.053 25.063 48.863 16.382 74.757 17.544 23.432 19.143 56.132 9.308 79.469l.11.11c11.893 11.949 19.523 31.259 19.439 49.197-.156 30.352-26.157 58.098-59.553 58.098H350.723C358.03 364.34 384 388.132 384 430.548 384 504 336 512 312 512z"></path></svg>
</i>

我的选择器与他们在文档中推荐的略有不同，因为它专门定位具有数据属性 data-fa-i2svg 的 svg，因为如果您选择呈现图标标记，则数据属性也在图标上标记，不会触发图标更新。

资源：
Bootstrap Collapse
Jquery on method
font awesome changing icons ：到达那里后在此链接上向上滚动一点，没有链接不断变化的图标，但此链接是下一部分。

【讨论】：