Font Awesome Icon Placement Issue in Circle for Different Browsers

Question

I'm using the plus icon (font awesome) and it's not centered properly in the blue circle for different browsers (Chrome Version 69.0.3497.92, Firefox 62, and Safari 11.1.2).

It's been bothering me for a while and I can't seem to find what the issue is. It also seems to shift when you're zooming in and out (command + plus or minus)

Any insight would be helpful!

Codepen: https://codepen.io/anev-prud/pen/oPQzXJ

Thanks!

Other things to note:

I'm using flex box to center things (vertically and/or horizontally)
Using bootstrap classes

=======================

Code from Codepen

HTML

<div class="container mt-5">
  <div class="row">
    <!-- button 1 -->
    <div class="col-md-4 mb-5 d-flex flex-column align-items-center">
        <h3>button 1</h3>
        <button class="btn btn-link btn-3 p-0 d-flex flex-column align-items-center">
            <div class="addToFav d-block mb-2">
                <i class="fa fa-plus"></i>
            </div>
            <div class="fav-text d-block">
                Favorites
            </div>
        </button>
    </div>
    <!-- button 2 -->
    <div class="col-md-4 mb-5 text-center d-flex flex-column align-items-center">
        <h3>button 2</h3>
        <button class="btn btn-link btn-3 p-0 d-flex flex-row align-items-center">
            <div class="addToFav d-inline-block">
                <i class="fa fa-plus"></i>
            </div>
            <div class="fav-text d-inline-block ml-2">
                Favorites
            </div>
        </button>
    </div>
  </div>
</div>

CSS

// main css
.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    .fa {
        padding: 0.2em 0.71em;
        background: blue;
        border-radius: 50rem;
        display: inline;
        // font-size: 50px;
        &::before {
            position: absolute;
            opacity: 1;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
    }
}
// on hover, remove underline under + icon
.btn:hover {
  text-decoration: none;
}
.btn:hover .fav-text {
  text-decoration: underline;
}

Just an added note, trying to stay away from any set width or height so the blue circle will update accordingly if the font size of the icon gets updated. — user2428993, Sep 18 '18 at 14:46

score 0 · Answer 1 · answered Sep 18 '18 at 14:39

0

Try this quick fix, if the icon has fixed size, this css will work:

.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    width: 24px;
    height: 24px;
    line-height: 24px;
    background: blue;
    border-radius: 50rem;
}

You do not need the :before css and the .fa css styles, only this code will do the job :)

answered Sep 18 '18 at 14:39

Andrej

111
6

1

Thanks, Andrej, for the feedback. Unfortunately the request requires to have no set width or height just in case we want to change the font size of the font awesome icon. I would definitely go with your solution though if it was the other way around. – user2428993 Sep 18 '18 at 14:42
if you need to change the size just change the values to be the same for the width, height and line-height :) – Andrej Sep 18 '18 at 14:45
I guess I'm trying to make things more dynamic, if that's even possible in this scenario. And for simplification, there's only one value that needs to be updated (font size). – user2428993 Sep 18 '18 at 14:49
That is a tricky part, check this answer: https://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container/19814948#19814948 – Andrej Sep 18 '18 at 15:03
Got it I'll check that out. Thanks! – user2428993 Sep 18 '18 at 15:12

Alexander Rice · Accepted Answer · 2018-09-18T18:11:31.830

0

If Andrej's solution doesn't work because you want to only have to change the font size, try using em values for the width and height:

.addToFav {
    position: relative;
    font-size: 15px;
    color: #fff;
    background: blue;
    width: 1.2em;
    height: 1.2em;
    line-height: 1.2em;
    border-radius: .6em;
}

In this example, you still won't need .addToFav .fa or .addToFav .fa::before selectors, but you can change the font size and the resulting symbol will scale

EDIT: Alternatively, you could use FontAwesome's .fa-plus-circle icon instead: You would replace your .fa-plus icon, remove selectors .addToFav .fa and .addToFav .fa::before and use the following CSS:

.addToFav {
    line-height: 1;
    font-size: 1.4em;
    color: blue;
}

Here's a pen with fa-plus-circle: https://codepen.io/anon/pen/NLEXqN

edited Sep 18 '18 at 18:11

answered Sep 18 '18 at 16:21

Alexander Rice

160
1
5

Thanks, Alexander. This seems a great solution, especially when the font size could change. By any chance, do you know why the icon doesn't seem to in the center of the blue circle when viewing in different browsers or when zooming in/out? It's off just a little. – user2428993 Sep 18 '18 at 17:16
I'm not sure what causes the browser discrepancies. I know I've had issues with font awesome icons where they appear to be just a couple pixels off sometimes. Have you tried using the `.fa-plus-circle` icon? Font Awesome has some icons that already have a circular shape: https://fontawesome.com/v4.7.0/icon/plus-circle (supported since v1.0) I've edited my answer with a `fa-plus-circle` solution. – Alexander Rice Sep 18 '18 at 18:16
Works great. Thanks, Alexander! – user2428993 Sep 25 '18 at 12:51

Font Awesome Icon Placement Issue in Circle for Different Browsers

2 Answers2