在一个大图标堆栈小图标与字体令人敬畏

Question

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

我尝试使用font-awesome的图标堆栈，如下所示：

fa-5x

但这是结果：

正如您所看到的，加号非常大且粗体。我希望加号图标比周围的圆圈小得多，而且更加精细。

我尝试将fa-1x移动到圆形图标（将其从span项目中删除），但这会使整个图标变小。我尝试只使用加号大小来播放fa-5x，但这样就保持原样（如果我放U2.id < U1.id它使它比圆圈大得多）。

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

Here's a JSFiddle with my experiments

Answer 1

我甚至不打扰使用FontAwesome。您可以使用单个元素和一些CSS来完成它，它可以让您更好地控制每个元素的大小。

此技术使用CSS Psuedo Elements，您可以阅读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>