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

尝试此快速修复方法，如果图标具有固定大小，则此CSS将起作用：

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

您不需要：bes css和.fa css样式之前，仅此代码即可完成工作：）

Answer 2

如果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

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

2 个答案: