圆圈中的不同图标显示为彩蛋

Question

我想让三个不同的图标并排显示，一旦我这样做，它们就不再是圆形的，而是更像一个鸡蛋了。我该如何解决这个问题？

HTML

 <div class="row text-center">
                <div class="col-lg-4 mb-5 mb-lg-0">
                    <i class="fas fa-rocket icon-fast"></i>
                    <h3 class="services-title">Head</h3>
                    <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
                </div>

                <div class="col-lg-4 mb-5 mb-lg-0">
                    <i class="fas fa-glasses icon-fast"></i>
                    <h3 class="services-title">Head</h3>
                    <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
                </div>
                <div class="col-lg-4 mb-5 mb-lg-0">
                    <i class="fas fa-lock icon-fast"></i>
                    <h3 class="services-title">Head</h3>
                    <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
                </div>

            </div>

CSS

.icon-fast {
  font-size: 62px;
  border-radius: 50%;
  padding: 16px;
  /* background-color: green;*/
  background: linear-gradient(to bottom right, #035ff3, #550ca4);
  color: white;
}

.services-title {
  font-weight: normal;
}

.services-subtitle {
  font-size: 17px;
}

同一个图标一写三遍，我就得到了真正的圆圈。我想在三个不同的上使用这个？

Answer 1

您需要将 display: inline-block; 添加到 CSS 中的 .icon-fast class。然后设置一些宽度和高度相等。你也可以玩你的 oadding 居中。

查看：

.icon-fast {
  font-size: 62px;
  border-radius: 50%;
  padding: 10px;
  /* background-color: green;*/
  background: linear-gradient(to bottom right, #035ff3, #550ca4);
  color: white;
  display: inline-block;
  height: 120px;
  width: 120px;
}

.services-title {
  font-weight: normal;
}

.services-subtitle {
  font-size: 17px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 
 <div class="row text-center">
                <div class="col-lg-4 mb-5 mb-lg-0">
                    <i class="fas fa-rocket icon-fast"></i>
                    <h3 class="services-title">Head</h3>
                    <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
                </div>

                <div class="col-lg-4 mb-5 mb-lg-0">
                    <i class="fas fa-rocket icon-fast"></i>
                    <h3 class="services-title">Head</h3>
                    <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
                </div>
                <div class="col-lg-4 mb-5 mb-lg-0">
                    <i class="fas fa-rocket icon-fast"></i>
                    <h3 class="services-title">Head</h3>
                    <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
                </div>

            </div>

Answer 2

因为 i 是内联元素，您必须使用 d-inline-block 实用程序 class

使其成为块状元素

如果需要居中设置，可以在i

中使用 d-inline-flex align-items-center justify-content-center

另外你需要把width设置成和height一样，才能做成正方形

在伪元素::before

中使用font-size可以调整图标的大小

.icon-fast {
  border-radius: 50%;
  padding: 16px;
  /* background-color: green;*/
  background: linear-gradient(to bottom right, #035ff3, #550ca4);
  color: white;
  width: 62px;
  height: 62px;
}

.icon-fast::before {
  font-size: 30px/* change this as you need */
}

.services-title {
  font-weight: normal;
}

.services-subtitle {
  font-size: 17px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-lg-4 mb-5 mb-lg-0">
      <i class="fas fa-rocket icon-fast d-inline-flex align-items-center justify-content-center"></i>
      <h3 class="services-title">Head</h3>
      <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
    </div>

    <div class="col-lg-4 mb-5 mb-lg-0">
      <i class="fas fa-ad icon-fast d-inline-flex align-items-center justify-content-center"></i>
      <h3 class="services-title">Head</h3>
      <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
    </div>
    <div class="col-lg-4 mb-5 mb-lg-0">
      <i class="fas fa-atlas icon-fast  d-inline-flex align-items-center justify-content-center"></i>
      <h3 class="services-title">Head</h3>
      <p class="text-black-50 services-subtitle">Some text for you, lalalalal.</p>
    </div>
  </div>
</div>

圆圈中的不同图标显示为彩蛋

Different icons in the circle are shown as eggs

css

icons

font-awesome

bootstrap-4