원 안의 다른 아이콘이 달걀로 표시됨 [중복]
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>