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

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;
}

Answer 2

将此类直接添加到您的图标中

.circle-icon {
  border: 2px solid pink;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  vertical-align: middle;
}