css - 在 Font Awesome 图标周围添加圆形边框

Question

我正在尝试在字体真棒图标周围创建一个圆形边框，如下所示...

这是我的标记：

<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 应用于图标组件，但没有成功。

标签： cssfont-awesomeborder-radius

Answer 1

这可以通过在 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;
}