Font Awesome Plus Inside Circle 只显示圆圈

Question

我将 Font Awesome 与 Bootstrap 4 手风琴一起使用，并尝试显示一个带有圆圈的加号，它应该切换为带有圆圈的减号，但我只看到圆圈。这是我的带有 fa 图标的手风琴的第一部分：

<div id="accordion" class="my-accordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    My Heading
                    <span class="fa-stack fa-sm">
                        <i class="fas fa-circle fa-stack-2x"></i>
                        <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
                    </span>
                </button>
            </h2>
        </div>
     ...

然后使用此 jquery 代码切换图标：

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
        $(e.target)
          .prev()
          .find("i:last-child")
          .toggleClass("fa-minus fa-plus");
    });

我做错了什么？

Answer 1

我找到了解决问题的办法。如果其他人有同样的问题，您可以参考我更新的代码。它在圆圈内显示加号并在圆圈内切换为负号：

<div id="accordion" class="my-accordion">
<div class="card">
    <div class="card-header" id="headingOne">
        <h2 class="mb-0">
            <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                My Heading
                <i class="fa fa-plus-circle fa-lg"></i>
            </button>
        </h2>
    </div>
 ...

将这个 jquery 代码放在手风琴后面：

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
        $(e.target)
          .prev()
          .find("i:last-child")
        .toggleClass("fa fa-minus-circle fa-lg  fa fa-plus-circle fa-lg");

    });

Font Awesome Plus Inside Circle 只显示圆圈

Font Awesome Plus Inside Circle Only Showing the Circle

twitter-bootstrap

font-awesome

bootstrap-4