使用Bootstrap 4 css在折叠/展开时更改插入符号

我不确定为什么我的插入符号没有使用CSS（使用Bootstrap4和CSS）从下到右改变。我尝试了.collapped CSS属性。这是一个密码笔：

下面是我正在尝试的代码： HTML:

---

为什么要标记jquery？您需要使用jquery来实现这一点吗？这里的可运行代码段是否显示了您试图使用jquery实现的目标？

<div class="accordion" id="accordionExample">
    <div id="headingOne">
        <button class="accordian-btn d-flex align-items-center" type="button">
        <div class="form-group form-check mb-0 mr-2">
            <input type="checkbox" class="form-check-input" id="Wildlife">
            <label class="form-check-label" for="Wildlife"><strong>Wildlife</strong></label>
        </div>
        <a href="#" data-toggle="collapse" data-target="#collapseWildlife" aria-expanded="false" aria-controls="Wildlife">
         <i class="fa fa-angle-right arrow-right"></i>
         <i class="fa fa-angle-down arrow-down"></i>
       </a>
       </button>
    </div>
   
    <div id="collapseWildlife" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="my-2">                                                                                                                    
            <button class="accordian-btn d-flex align-items-center" type="button">
                <div class="form-group form-check mb-1 ml-2 mr-2">
                    <input type="checkbox" class="form-check-input" id="">
                    <label class="form-check-label" for="">Mammal Biodiversity</label>
                </div>
                <a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
                    <i class="fa fa-angle-right arrow-right"></i>
                    <i class="fa fa-angle-down arrow-down"></i>
                </a>
           </button>
                                                                                                                        
           <button class="accordian-btn d-flex align-items-center" type="button">
                <div class="form-group form-check mb-1 ml-2 mr-2">
                    <input type="checkbox" class="form-check-input" id="">
                    <label class="form-check-label" for="">Bird Biodiversity</label>
                </div>
                <a href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseOne">
                       <i class="fa fa-angle-right arrow-right"></i>
                       <i class="fa fa-angle-down arrow-down"></i>
                </a>
           </button>                                                                                                           </div>
                                                    

.arrow-down{
    display: block;
}
.arrow-right{
    display: none;
}
.collapsed .arrow-right{
    display: none;
}
.collapsed .arrow-down{
    display: block;
}