logo标签列表

iPhone（Safari）无法居中FontAwesome图标。

cssiphonefont-awesome
3

我有一个简单的按钮，使用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>

在所有浏览器中，图标都会显示在中间，除了 iPhone 上的 Safari。在那里，图标位于右侧。
其他浏览器 https://istack.dev59.com/X2FXK.webp Safari iPhone：https://istack.dev59.com/KFxq8.webp 如果我删除此行。
font-size: 1em;

图标显示在中间。 你有什么想法我做错了什么吗？
我有完全相同的问题。请告诉我您是否已经解决了它？ - Abhishek Subradeep
3个回答
3
将这两行代码添加到包含按钮的 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;
}
0

我遇到了类似的问题，它在所有浏览器上都可以工作，但在 iPhone 上无法正常运行。

将这三行代码添加到 .myButton 类中，可以解决你的问题。我已在 iPhone 上测试过了。http://plnkr.co/edit/KACcDGP6yt9cPJvF

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

我也遇到了这个问题。这是我的HTML代码：

<div class="slider-nav">
    <button type="button" role="presentation" class="owl-prev">
       <i class="fas fa-angle-left" aria-hidden="true"></i>
    </button>
    <button type="button" role="presentation" class="owl-next">
       <i class="fas fa-chevron-right" aria-hidden="true"></i>
    </button>
</div>

这是 CSS 代码

.slider-nav button {
    border: 2px solid #fff;
    width: 50px;
    height: 50px;
    line-height: 51px;
    margin-right: 10px;
    border-radius: 50%;
    color: #fff;
    background-color: transparent;
    cursor: pointer;
    -webkit-transition: .5s all ease;
    -o-transition: .5s all ease;
    transition: .5s all ease;
}
.slider-nav button i {
    max-width: 100%;
    max-height: 100%;
    font-size: 25px;
    border: thin solid yellow;
}

以下是屏幕截图。左边是非iOS设备，右边是iOS设备。通过在i标签周围加上边框，您可以看到在iOS设备（平板电脑、手机）上它不在i标签的边界内。但是在其他设备上是可以的。有趣的是，在MAC桌面上使用Safari时，它可以正确地显示，就像左侧的屏幕截图一样。 Screencaptures

我尝试了上面的答案并添加了CSS，但对我没有用。

这是在fontawesome 6.2.1上。我也尝试了以下图标，但出现了相同的问题。

<i class="fa-solid fa-chevron-right"></i>

非常感谢任何想法。

这并没有真正回答问题。如果您有不同的问题，可以通过点击提问来提出。如果您想在此问题获得新的答案时得到通知，您可以关注此问题。一旦您拥有足够的声望，您还可以添加悬赏以吸引更多关注。- 来自审核 - 350D
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接