不同浏览器的圆形字体真棒图标放置问题

Question

我使用的是加号图标（字体真棒），它在不同浏览器（Chrome 版本 69.0.3497.92、Firefox 62 和 Safari 11.1.2）的蓝色圆圈中未正确居中。

这困扰了我一段时间，我似乎无法找到问题所在。当您放大和缩小（命令 + 加号或减号）时，它似乎也会发生变化

任何见解都会有所帮助！

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

谢谢！

其他注意事项：

• 我正在使用弹性框来居中（垂直和/或水平）

• 使用引导类

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

来自 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;
}

Answer 1

如果 Andrej 的解决方案不起作用，因为您只想更改字体大小，请尝试使用 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

Answer 2

试试这个快速修复，如果图标有固定大小，这个 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 样式，只有这段代码可以完成这项工作:)