Проблема размещения шрифта в кругу для разных браузеров - PullRequest
Новая
       8

Проблема размещения шрифта в кругу для разных браузеров

0 голосов
/ 18 сентября 2018

Я использую значок плюса (шрифт потрясающий), и он неправильно центрируется в синем круге для разных браузеров (Chrome версии 69.0.3497.92, Firefox 62 и Safari 11.1.2).

Этонекоторое время беспокоил меня, и я не могу понять, в чем проблема.Также кажется, что смещение происходит, когда вы увеличиваете и уменьшаете масштаб (команда + плюс или минус)

Любое понимание будет полезным!

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

Спасибо!

Другие примечания:

  • Я использую flex box для центрирования вещей (по вертикали и / или по горизонтали)

  • Использование классов начальной загрузки

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

Кодиз 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;
}

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

Если решение Андрея не работает, потому что вам нужно только изменить размер шрифта, попробуйте использовать значения em для ширины и высоты: 

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

В этом примере вы все равно не будетевам понадобятся селекторы .addToFav .fa или .addToFav .fa::before, но вы можете изменить размер шрифта, и результирующий символ будет масштабироваться

РЕДАКТИРОВАТЬ: В качестве альтернативы вы можете использовать вместо этого иконку FontAwesome .fa-plus-circle: вы замените свойЗначок .fa-plus, удалите селекторы .addToFav .fa и .addToFav .fa::before и используйте следующий CSS: 

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

Вот ручка с fa-plus-circle: https://codepen.io/anon/pen/NLEXqN

0 голосов
/ 18 сентября 2018

Попробуйте это быстрое исправление, если значок имеет фиксированный размер, этот CSS будет работать: 

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

Вам не нужны стили: before css и .fa css, только этот код будет выполнятьработа:)

...