css - 圆圈中的不同图标显示为鸡蛋

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

只要我写三遍相同的图标，我就会得到真正的圆圈。我想把这个放在三个不同的吗？

标签： cssbootstrap-4iconsfont-awesome

Answer 1

您需要添加display: inline-block;到.icon-fastCSS 中的类。然后设置一些宽度和高度相等。您也可以玩弄您的加载以使其居中。

一探究竟：

.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>