iphone (Safari) не центрирует значки FontAwesome - PullRequest
Новая
       22

iphone (Safari) не центрирует значки FontAwesome

0 голосов
/ 05 ноября 2018

У меня есть простая кнопка со значком FontAwesome. 

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

Во всех браузерах значок будет отображаться в середине, кроме Safari на Iphone. Там значок справа.

Другие браузеры https://i.stack.imgur.com/X2FXK.png

Safari Iphone: https://i.stack.imgur.com/KFxq8.png

Если я удалю строку 

font-size: 1em;

значок показан посередине. Ты хоть представляешь, что я делаю не так?

1 Ответ

0 голосов
/ 05 декабря 2018

Добавление этих строк в div, удерживающий кнопку, решило проблему в мобильном Safari: 

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

Итак, весь элемент закончился следующим образом: 

.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;
}
...