when i add a border to a floating button, the fontawesome icons are shift a few pixels.

what am i doing wrong?

Expected behavior icons should be centered

Actual behavior icons are shifted ~3px

Resources (screenshots, code snippets etc.)

css:

.pink-outline {
    border: 2px solid #e91e63;}

html:

<a class="back-button btn-floating rotate-btn white pink-outline" data-card="card-0"><i class="fas fa-times" style="color: #e91363"></i></a>