Font Awesome - 如何将图标放在圆形内？

Question

我正在尝试将一些Font Awesome图标放置在一个

元素上，使其看起来像一个包含图标的圆形。总共有三个圆中各自包含了三个图标，所有的圆都必须相邻。但是当我尝试这么做时，图标的位置不正确，圆形移动了位置。我不知道我做错了什么。

.python {
    width: 200px;
    height: 200px;
    display: inline-block;
    border-radius: 50%;
    margin-left: 183px;
    background-color: lightblue;
}
.fa-python{
    font-size: 100px;
    display: inline-block;
    position: relative;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<div class="python">
   <i class="fab fa-python"></i>  
</div>

- Ornella Acerbi

---

我认为最好将 .fa-python{...} 类定义放在 .python{...} 类外面。 - PayamB.

嗨，Ornella，你的问题并不是特别与FontAwsome相关。不要专注于FA特定的解决方案，尝试使用普通字符（如“W”或“M”，通常是字体中最宽的字符），看看会发生什么。如果您的解决方案适用于这些字符，它也将适用于FA（毕竟它只是一种字体）。此外，在您的CSS中添加* { outlines: 1px dashed purple }，您将看到元素的位置如何。 - Rene van der Lende

Answer 1

Font Awesome 已经允许这样做了，您不需要自己执行：

.custom .fa-circle:before {
  border-radius: 50%;
  background: linear-gradient(red, blue);
  color: transparent;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<span class="fa-stack fa-2x">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
    <i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x custom">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

相关链接：https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

---

对于V6版本，相同的代码同样适用：

.custom .fa-circle:before {
  border-radius: 50%;
  background: linear-gradient(red, blue);
  color: transparent;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.2.0/css/all.css">

<span class="fa-stack fa-2x">
    <i class="far fa-circle fa-stack-2x"></i>
    <i class="fab fa-python fa-stack-1x"></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" style="color:lightblue"></i>
    <i class="fab fa-python fa-stack-1x "></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" style="color:blue"></i>
    <i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

<span class="fa-stack fa-2x custom">
    <i class="fas fa-circle fa-stack-2x" ></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

- Temani Afif

Answer 2

我认为使用flex更容易

.python {
    width: 200px;
    height: 200px;
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center; 
}

或网格

{
    display: grid;
    place-content: center; 
}

- Adrian C

---

你认为手动更改元素的显示属性比使用内置的FA类更容易吗？ - TylerH

第一个答案展示了如何同时使用CSS和HTML，因此您需要修改HTML。如果您有一个包含许多图标的大型网站，并且这些图标放置在不同的模板（HTML或PHP）文件中，则最好只更改CSS。在给定的示例中，我们可以对i.fab.fa-python或div.python进行样式设置。 - Adrian C