Question

我正在从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来强制它，但它会很难看，我认为有更好的方法可供使用。

由于斯蒂芬

Answer 1

在Fa5中有一些相当大的变化，因为图标实际上是为svgs换掉的，你必须操纵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标签替换传统的icon标签：

<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：在您到达此链接后向上滚动一点，没有更改图标的链接，但此链接是下一部分。

FA5在崩溃时切换图标

1 个答案: