无法居中FA图标

Question

所以我一直试图将这个字体很棒的图标集中在一起，我在这里读了一些问题，但我无法理解它。我想将这个图标居中放在文章的水平位置。

这是HTML代码：

<section class="introduction">
    <article class="introduction__article">
        <h1 class="introduction__header">About me</h1>
        <p class="introduction__paragraph">
            Lorem
            <br> The languages and / or frameworks that I use and have knowledge of are:
            <br>

            <ul class="introduction__language-list">
                <li>
                    <span class="color-red">//</span> SASS
                </li>
                <li>
                    <span class="color-red">//</span> Bourbon Neat
                </li>
                <li>
                    <span class="color-red">//</span> Vanilla Javascript
                </li>
                <li>
                    <span class="color-red">//</span> PHP
                </li>
                <li>
                    <span class="color-red">//</span> HTML5 <span class="color-red">&amp;</span> CSS3</li>

            </ul>

            <br> I hope you may find what you need here, and if there are any questions feel free to send me an <span class="color-red"><a title="Send me an email" class="nostyle--link" href="#" onclick="onePageScroll('.contact')">email</a></span>.

            <a href="#projects" title="Go to my portfolio" class="introduction__scroll-button"><i class="fa fa-angle-double-down introduction__scroll-button"></i></a>
    </article>
</section>

这是SASS

.introduction {
 height: auto;
 width: 100%;
 position: relative;
 padding-top: $height-header + 100px;
 padding-bottom: 100px;

 background: $introduction-background;

 &__article {
  text-align: left;
  width: 80%;
  margin: 0 auto;

 @include media($m) {
   width: 800px;
 }
}

&__scroll-button {
  font-size: 40px;
  margin: 0 auto;
  color: $white;
  text-align: center;
}