FAQ下拉箭头未显示，颜色未更改为蓝色以外的其他颜色

Question

我有以下CSS：

h2 {
    font-family: Arial, Verdana;
    font-weight: 800;
    font-size: 2.5rem;
    color: #091f2f;
    text-transform: uppercase;
}
.accordion-section .panel-default > .panel-heading {
    border: 0;
    background: #f4f4f4;
    padding: 0;
}
.accordion-section .panel-default .panel-title a {
    display: block;
    font-style: italic;
    font-size: 1.5rem;
}
.accordion-section .panel-default .panel-title a:after {
    font-family: 'FontAwesome';
    font-style: normal;
    font-size: 3rem;
    content: "\f106";
    color: #1f7de2;
    float: right;
    margin-top: -12px;
}
.accordion-section .panel-default .panel-title a.collapsed:after {
    content: "\f107";
}
.accordion-section .panel-default .panel-body {
    font-size: 1.2rem;
}

以及以下HTML：

 <section class="accordion-section clearfix mt-3" aria-label="Question Accordions">
            <div class="container">

                <h2>General Questions</h2>
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    <div class="panel panel-default">
                        <div class="panel-heading p-3 mb-3" role="tab" id="heading0">
                            <h3 class="panel-title">
                                <a class="collapsed" role="button" title="" data-toggle="collapse" data-parent="#accordion" href="#collapse0" aria-expanded="true" aria-controls="collapse0">
                                    I do not have a computational background, can I use your system?
                                </a>
                            </h3>
                        </div>
                        <div id="collapse0" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading0">
                            <div class="panel-body px-3 mb-4">
                                Absolutely! If you follow the instructions, you should be all set. The system is specifically designed to be usable for researchers without computational backgrounds. But we do recommend you read research papers about the applications of the computational methods used here in the fields of journalism and communication research. See the recommended readings below.
                            </div>
                        </div>
                    </div>
</div>
</section>

但是，更改CSS颜色：＃1f7de2;到中紫色不起作用，并且下拉箭头显示异常，与本教程不同。我该如何解决？

这是我看到的：

这是我要关注的教程：https://www.solodev.com/blog/web-design/how-to-use-bootstrap-accordions-to-organize-faq-pages.stml

这也是我希望具有的下拉箭头：