Different icons in the circle are shown as eggs

Question

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?

You get three perfect circles on the second attempt because the icon you're using is already a perfect circle (notice how it's a perfect circle on the first attempt). I suspect you wouldn't get perfect circles if you used the 'glasses' icon or the 'padlock' icon three times. — TylerH, Nov 16 '20 at 20:21

John · Answer 1 · 2020-11-14T18:30:53.517

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>

Thanks for your help, as soon as I take three different icons, it's no longer round. Can you try three different icons? — , Nov 14 '20 at 18:53

dippas · Accepted Answer · 2020-11-14T19:19:07.587

-1

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>

edited Nov 14 '20 at 19:19

answered Nov 14 '20 at 18:28

dippas

58,591
15
114
126

Thanks for your help, as soon as I take three different icons, it's no longer round. Can you try three different icons? – Nov 14 '20 at 18:52
@SusanaPetrova in order to help you better can you tell me which font-awesome version are you using? – dippas Nov 14 '20 at 18:53
Thanks for the help. I'm not sure but this `https://use.fontawesome.com/releases/v5.15.1/js/all.js` – Nov 14 '20 at 18:55
`` – Nov 14 '20 at 18:56
1

@SusanaPetrova see the updated answer – dippas Nov 14 '20 at 19:01
Thank you very much! It is now round, unfortunately the circles are too big and the icons cannot be adjusted in size and are not really in the middle. Can you show me how to do this? Thank you so much! – Nov 14 '20 at 19:05
The icons can be adjust using `font-size`. I don't understand what is the current issue – dippas Nov 14 '20 at 19:07
Thank you very much, unfortunately you are not in the middle and the circle is too big. I would like it to be as big as in my question. So not very big. – Nov 14 '20 at 19:07
1

@SusanaPetrova see updated answer – dippas Nov 14 '20 at 19:11
The `.fa` class also would apply `display: inline-block` I believe. – TylerH Nov 16 '20 at 20:19
@TylerH in the answer `.fa` has utility class `d-inline-flex` – dippas Nov 16 '20 at 20:24

Different icons in the circle are shown as eggs

2 Answers2