问题描述
我正在尝试在一个很棒的字体图标周围创建一个圆形边框,如下所示......
这是我的标记:
<div class="col-md-4 text-center service-section">
<div class="icon-border">
<font-awesome-icon icon="laptop" size="3x"/>
</div>
<h4 class="mt-4">Blah Blah</h4>
<p class="mt-3">
Donec viverra,libero sit amet consectetur porta,massa velit tempus
sapien.
</p>
</div>
我在图标的外部添加了一个 div,并尝试将 div 应用到图标组件,但没有成功。
解决方法
这可以通过在 CSS 中添加几行来完成,如下所示:
.icon-border {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
width:60px;
height: 60px;
border-radius: 50%;
border: 2px solid red;
}
,
将此类直接添加到您的图标
.circle-icon {
border: 2px solid pink;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
vertical-align: middle;
}