用 font-awesome 将小图标堆叠在大图标上

Posted 2023-02-23

【中文标题】用 font-awesome 将小图标堆叠在大图标上

【英文标题】：Stack small icon over a large icon with font-awesome

【发布时间】：2015-07-04 21:22:16

【问题描述】：

我正在尝试使用 font-awesome 创建一个圆形的“+”按钮。我附上了来自谷歌联系人的类似按钮的图片：

我尝试使用font-awesome的图标栈如下：

<span class="fa-stack fa-5x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-plus fa-stack-1x fa-inverse"></i>
</span>

但结果是这样的：

如您所见，加号非常大且粗体。我希望加号图标比它周围的圆圈小得多，也更薄。

我尝试将fa-5x 移动到圆形图标（将其从跨度项目中删除），但这会使整个图标变小。我尝试只使用加号大小，给它fa-1x，但这让它保持原样（如果我输入fa-5x，它使它比圆圈大得多）。

有没有办法实现我想要做的事情？

Here's a JSFiddle with my experiments

【参考方案1】：

我什至不会为此使用 FontAwesome。您可以使用单个元素和一些 CSS 来做到这一点，它使您可以更好地控制每个单独元素的大小。

此技术使用 CSS 伪元素，您可以阅读有关 here 和 here 的信息。它们允许您创建标记中不一定存在的形状和样式内容。

这是我想出的：

jsFiddle link

body

    padding: 50px; /* For this demo only */


.circle

    display: block;
    background: #3498db;
    width: 120px;  /* Can be any size you want */
    height: 120px; /* Can be any size you want */
    border-radius: 50%; /* Makes the div a circle */
    position: relative; /* Allows you to position the pseudo elements */


.circle:before, .circle:after

    display: block;
    content: "";
    position: absolute;
    border-radius: 2px;
    background: #fff;


.circle:before

    width: 4px;
    height: 32px;
    top: calc(50% - 16px); /* 16px = half of the height */
    left: calc(50% - 2px); /* 2px = half of the width */


.circle:after

    width: 32px;
    height: 4px;
    top: calc(50% - 2px);   /* 2px = half of the height */
    left: calc(50% - 16px); /* 16px = half of the width */

<div class="circle"></div>

【讨论】：

非常感谢！这真的很棒。我不是 CSS 专家，所以我想知道，“+”号是从哪里来的？我想不通。

你应该看看 CSS Pseudo Elements。加号由两种形状组成。水平线和垂直线。水平线由:before 伪元素创建，垂直线由:after 伪元素创建。我将更新答案以包含对此的更好描述。