Different icons in the circle are shown as eggs [duplicate] - css

Question

This question already has answers here:
Font Awesome - how to put an icon inside a circle?
(2 answers)
Make Font Awesome icons in a circle border with right 1:1 ratio
(4 answers)
How to round font-awesome icons?
(3 answers)
Closed 2 years ago.
I would like to have three different icons displayed next to each other, as soon as I do this they are no longer round but more like an egg. How can I solve this problem?
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;
}
As soon as I write the same icon three times, I get real circles. I would like to have this on three different ones?

Answer 1

You need to add display: inline-block; to the .icon-fast class in CSS. then set some a width and height equal. Also you can play around with your oadding to center it.
Check it out:
.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

Because i is an inline element, you have to make it block, by using d-inline-block utility class
If you need to set it centered, you can use d-inline-flex align-items-center justify-content-center in i
Also you need to set width as the same as height, to make a square
The size of the icon can be adjusted using font-size in pseudo element ::before
.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>