带有fontawesome图标的DropDown Bootstrap

如何解决带有fontawesome图标的DropDown Bootstrap

我正在使用带有fontawesome图标的引导程序，但遇到了一些麻烦。

我有一个带有下拉列表的导航栏：

因此，如您所见，perfil下拉列表有点奇怪。我该如何解决？

我希望箭头在右侧

在这部分上：

<li style="margin-left: 8%;" class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle user-icon" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span style="font-size: 25px;">
                            <i class="fas fa-user-circle"><span style="margin-left: 5px; font-size: 16px;">Perfil</span></i>
                        </span>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="{% url "bet:profile" %}">Minha conta</a>
                        <a class="dropdown-item" href="{% url "bet:logout" %}">Sair</a>
                    </div>
                </li>

这是我的CSS：

   .nav .container-fluid{
    padding-left: 0px;
    padding-right: 0px;
}

.navbar-nav{
    padding-right: 25px;
}

.nav .navbar-nav a{
    font-family: Montserrat-Regular;
    font-size: 16px;
    line-height: 1.7;
}

.nav nav{
    background-color: #194979;
    padding-left: 20%;
}

.nav .navbar-brand{
    margin-right: 25%;
}

.nav .span-brand{
    font-size: 16px;
    vertical-align: bottom;
}

.item{
    margin-left: 15%;
}

.user-icon{
    padding-top: 0px;
    padding-bottom: 0px;
}

.fas,.dropdown-toggle{
    display: inline-block;
}