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

Question

My icon is not centered to my input button, how do I get them aligned?

<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>

The icon does not have margin or padding so I cannot simply do a bootstrap "my-auto"

What font-size is this? `` Just set the font-size of `` to the same? — EGC, Dec 13 '19 at 03:12
What is the *desired* alignment in your example? The alignment in your image appears baseline, though it appears as though the `font-size` is slightly largely for the image? Just set them to be the same. — Obsidian Age, Dec 13 '19 at 03:13
line-height adjusts both, it just moves the entire span tag, icon is still not centered — Button Press, Dec 13 '19 at 03:30

score 1 · Accepted Answer · answered Dec 13 '19 at 03:43

You can use bootstrap 4.0 flex class to align item in the center

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>

thanks for this fix, didn realise i only needed d-flex – Button Press Dec 13 '19 at 03:49 — Button Press, Dec 13 '19 at 03:49

score 1 · Answer 2 · answered Dec 13 '19 at 03:45

From the title i guess what you should try is to change the display to flex column and align the contents

<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>

And Aydın · Answer 3 · 2019-12-13T04:42:41.853

1

just change your "far" class as below;

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

edited Dec 13 '19 at 04:42

answered Dec 13 '19 at 04:31

And Aydın

84
4

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

3 Answers3