使用 font-awesome 将小图标堆叠在大图标上
Stack small icon over a large icon with font-awesome
我正在尝试使用 font-awesome 创建一个圆形的“+”按钮。我附上了来自 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
移动到圆圈图标(将其从 span 项中删除),但这会使整个图标变小。我尝试通过给它 fa-1x
来只玩加号大小,但这让它保持原样(如果我把 fa-5x
它使它比圆圈大得多)。
是否有办法实现我想要做的事情?
我什至懒得为此使用 FontAwesome。您可以使用单个元素和一些 CSS 来做到这一点,它使您可以更好地控制每个单独元素的大小。
此技术使用 CSS 伪元素,您可以阅读有关 here and here 的内容。它们允许您创建不一定存在于标记中的形状和样式内容。
这是我想出的:
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>
我正在尝试使用 font-awesome 创建一个圆形的“+”按钮。我附上了来自 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
移动到圆圈图标(将其从 span 项中删除),但这会使整个图标变小。我尝试通过给它 fa-1x
来只玩加号大小,但这让它保持原样(如果我把 fa-5x
它使它比圆圈大得多)。
是否有办法实现我想要做的事情?
我什至懒得为此使用 FontAwesome。您可以使用单个元素和一些 CSS 来做到这一点,它使您可以更好地控制每个单独元素的大小。
此技术使用 CSS 伪元素,您可以阅读有关 here and here 的内容。它们允许您创建不一定存在于标记中的形状和样式内容。
这是我想出的:
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>