为什么我的图标在 Safari 和其他浏览器上看起来不同？

Question

我正在尝试制作一个圆形图标，我注意到

border radius

在 Safari 中无法正常工作。图标如下：

火狐	野生动物园

如您所见，Safari 中的图标边缘由于某种原因变得圆滑。我尝试了

StackOverflow

上提到的其他解决方案，但它仍然不起作用。 border-radius 是制作圆形图形的唯一方法吗？还有另一种方法可以将图标放置在圆圈内吗？

.fa-file-lines{
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    padding: 26px;
    margin-left: 69px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="sampleIcon">
    <i class="fa-solid fa-file-lines"></i>
</div>

Answer 1

不幸的是，我没有 Safari，所以我无法对此进行测试，但查看您的代码，似乎您正在将

border-radius

应用于图标而不是黑框/容器。也许这就是 Safari 砍掉其边缘的原因（尽管我不知道为什么它在 Firefox 中有效）。

尝试将边框样式应用到容器，如下所示：

.fa-file-lines {
  color: white;
  font-size: 2em; /* This is a random number, just set the size you want*/
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sampleIcon {
  width: 4em; /* This is a random number, just set the size you want*/
  height: 4em; /* This is a random number, just set the size you want*/
  background-color: black;
  border-radius: 50%;
  position: relative;
}

<head>
<script src="https://kit.fontawesome.com/b608acffe1.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="sampleIcon">
  <i class="fa-solid fa-file-lines"></i>
</div>
<body>

为什么我的图标在 Safari 和其他浏览器上看起来不同？

问题描述投票：0回答：1

1个回答

最新问题

为什么我的图标在 Safari 和其他浏览器上看起来不同？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1