Css 按钮文本中间，图标右侧：对齐内容

我正在使用下面模板中的html代码。问题在于，它对图标和文本使用了justify内容

<button type="submit" class="btn btn-primary btn-block btn-icon-split">
        <span class="icon">
            <i class="fas fa-search"></i>
        </span>
        <span class="text">Search</span>
    </a>
</button>

试图让它工作，通过使用浮动，引导拉正确的东西

---

Im使用以下bs主题：

您可以通过使用

绝对位置将图标从正常文档流中移除来解决问题：


.btn{
宽度：300px；
}
.btn图标拆分{
位置：相对位置；
填充：0；
溢出：隐藏；
显示：内联flex；
对齐项目：拉伸；
证明内容：中心；
}
.btn图标拆分.icon{
背景：rgba（0,0,0,15）；
显示：内联块；
填充：.375rem.75rem；
位置：绝对位置；
左：0；
排名：0；
身高：100%；
}
.btn图标拆分.text{
显示：内联块；
填充：.375rem.75rem；
}

搜寻
您是否有指向您实际工作的站点的链接？
.btn-icon-split {
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

.btn-icon-split .icon {
    background: rgba(0,0,0,.15);
    display: inline-block;
    padding: .375rem .75rem;
}

.btn-icon-split .text {
    display: inline-block;
    padding: .375rem .75rem;
}