将字体真棒图标与跨度标签内的输入提交垂直对齐

Question

我的图标没有在输入按钮的中央，如何让它们对齐？

<span>
<i class="far fa-heart my-auto"></i>
<input type="submit" class="btn favorite-button bold-font py-0 px-1" name="favorite" value="Add to Favorites">
</span>

该图标没有边距或填充，所以我不能简单地做一个 bootstrap "my-auto"

Answer 1

您可以使用 bootstrap 4.0 flex class 将项目居中对齐

i {
  font-size: 20px;
  margin-right: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" rel="stylesheet" />




<span class="d-flex align-items-center mt-2 ml-2">
                <i class="far fa-heart my-auto"></i>
                <input type="submit" class="btn favorite-button font-weight-bold py-0 px-1" name="favorite" value="Add to Favorites">
              </div>

Answer 2

从标题我猜你应该尝试将显示更改为弹性列并对齐内容

<span class="d-flex flex-column justify-content-center align-items-center" style="width: 150px;">
        <i class="far fa-heart my-auto"></i>
        <input type="submit" class="btn favorite-button bold-font py-0 px-1" name="favorite" value="Add to Favorites">
</span>

Answer 3

只需如下更改您的“far”class；

.far {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    padding: 5px;
    font-size: 1rem;
}

将字体真棒图标与跨度标签内的输入提交垂直对齐

Align vertically font awesome icon with input submit inside a span tag

html

css

twitter-bootstrap

font-awesome