원 안의 다른 아이콘이 달걀로 표시됨 [중복]

Nov 14 2020

세 가지 다른 아이콘을 나란히 표시하고 싶습니다. 이렇게하면 더 이상 둥글 지 않고 달걀처럼 보입니다. 이 문제를 어떻게 해결할 수 있습니까?

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

같은 아이콘을 세 번 쓰 자마자 진짜 원이 생깁니다. 세 가지 다른 제품에 이걸 갖고 싶어요?

답변

John Nov 14 2020 at 18:23

CSS display: inline-block;에서 .icon-fast클래스에 추가해야합니다 . 그런 다음 너비와 높이를 동일하게 설정하십시오. 또한 당신은 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>