使用FontAwesome将小图标叠加在大图标上

Question

我正在尝试使用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”移到圆形图标中（从span项目中删除它），但这会使整个图标变小。我尝试通过给它“fa-1x”来调整加号的大小，但这会使它保持原样（如果我放置“fa-5x”，它会比圆形大得多）。有没有办法实现我想做的事情？这里是我的JSFiddle实验

- Avi

Answer 1

我甚至不会使用FontAwesome。您可以使用一个元素和一些CSS来完成它，并且它可以更好地控制每个单独元素的大小。此技术使用CSS伪元素，您可以在这里和这里阅读相关信息。他们允许您创建形状并为不存在于标记中的内容设置样式。以下是我想到的内容：jsFiddle链接.

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>

- Luke

---

非常感谢！这真的很棒。我不是CSS专家，所以我想知道，'+'标记是从哪里来的？我无法完全理解。 - Avi

你应该看一下CSS伪元素。加号由两个形状组成。水平线是通过:before伪元素创建的，垂直线是通过:after伪元素创建的。我会更新答案以包含更好的描述。 - Luke