将小图标堆叠在带有超赞字体的大图标上

debugcn 发表于 Dev

阿维

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

在此处输入图片说明

我尝试如下使用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它做成比圆圈大得多的话）。

是否有实现我想要做的事情的途径？

这是我实验的JSFiddle

路加

我什至不用为此使用FontAwesome。您可以使用单个元素和一些CSS来完成此操作，它使您可以更好地控制每个单独元素的大小。

该技术使用CSS Psuedo Elements，您可以在此处和此处阅读有关内容。它们使您可以创建标记中不一定存在的形状和样式内容。

这是我想出的：

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 */
}