iphone (Safari) does not centering FontAwesome icons

Admin 1
Viewed 1282

I have a simple button styled with a FontAwesome icon. 

<!DOCTYPE HTML>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<style>
    .myButton {
        width: 34px;
        height: 34px;
        border-radius: 4px;
        border: 0;
        color: #357CA5;
        background-color: rgba(0, 0, 0, 0.08);
        text-align:center;

        /* if I comment out the following line, the arrow will be shown in the middle */
        font-size: 1em;
    }

    .myButton:hover {
        background: #357CA5;
        color: #FFFFFF;
        cursor: pointer;
        box-shadow: 0 4px 6px -5px rgba(0, 0, 0, 0.6);
    }
</style>
</head>
<body>
<button class="myButton">
  <i class="fas fa-arrow-left" aria-hidden="true"></i>
</button>
</body>
</html>

In all browsers the icon will shown in the middle, except of Safari on the Iphone. There the icon is on the right.

Other Browsers https://i.stack.imgur.com/X2FXK.png

safari iphone: https://i.stack.imgur.com/KFxq8.png

If i delete the line

font-size: 1em;

the icon is shown in the middle. Do you have any idea what I am doing wrong?

font-awesome css iphone
2 Answers

Adding these to lines to the div holding the button solved the issue in mobile Safari:

display: flex;
justify-content: space-around;

So, the entire element ended up as follows:

.message-btn {
    display: flex;
    justify-content: space-around;
    margin-top: 0;
    width: 35px;
    height: 35px;
    background-color: white;    
    border-radius: 5px;
    border-width: 1px;
    border-color: #a3c862;
    color: #a3c862;
    text-transform: uppercase;
    text-align: center;
    -webkit-transition: 0.1s all ease-in-out;
    transition: all .1s ease-in-out;
    font-size:18px;
}
user_54544690

I had similar issues, It works on all browsers but IPhone

adding these three line to the class .myButton will solve your issue. I tested it in IPhone. http://plnkr.co/edit/KACcDGP6yt9cPJvF

   display: flex;
   justify-content: space-around;
   align-items: center;
user_37728570
Related