0

I have a web page. In this page, I have several font icons that I'm using. I would like to put a gray circle behind these icons. Effectively, I want to create a gray circle behind some content. At this time, I'm trying, I have the following:

.circled {
  background-color: gray;
  border-radius: 50%;
  display: inline-block;
  padding: 1.0rem;
}
<div class="circled">
  <i class="my-icon"></i>
</div>

While the content is "circled", the circle tends to be more of an oval. I would like to always render a perfect circle. Is there a way to do this with CSS? If so, how?

isherwood
  • 58,414
  • 16
  • 114
  • 157
Dev
  • 921
  • 4
  • 14
  • 31

3 Answers3

0

Use display: flex and align and justify the content to the center.

.circled{
height: 50px;
width: 50px;
  background-color: grey;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
 }
 
<div class="circled">
 <i class="my-icon">Icon</i>
</div>
Colin Chadwick
  • 146
  • 9
  • 1
    Please correctly read what the author of this questions wants. He does not want to have a lot of text inside the circle, instead he wants to place an icon. – Colin Chadwick Nov 23 '20 at 17:28
  • The challenge is, my content is variable size. For that reason, I can't set the `height` and `width` properties on the parent element via the `circle` class. I'm trying to figure out a way to do it more dynamically. – Dev Nov 23 '20 at 17:35
0

I've provided two snippets of code to demonstrate that this should work with various amounts of squares.

I did this by making a square square_holder to hold each square. Tweaking may have to be done to either square_holder or square based on how you would like the rows to display. Personally I like rows of three.

Try the following examples:

  1. One Square

.circled {
  height: 100px;
  width: 100px;
  background-color: grey;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
}

.square_holder {
  height: 60%;
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.square {
  height: 30%;
  width: 30%;
  margin: auto;
  background-color: #555;
}
<div class="circled">
  <div class="square_holder">
    <i class="square">
    </i>
  </div>
</div>
  1. Nine Squares

.circled {
  height: 100px;
  width: 100px;
  background-color: grey;
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
}

.square_holder {
  height: 70%;
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.square {
  height: 30%;
  width: 30%;
  margin: auto;
  background-color: #555;
}
<div class="circled">
  <div class="square_holder">
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
    <i class="square">
    </i>
  </div>
</div>

Let me know if you have any questions.

lime
  • 801
  • 8
  • 21
  • The challenge is, my content is variable size. For that reason, I can't set the `height` and `width` properties on the parent element via the `circle` class. I'm trying to figure out a way to do it more dynamically. – Dev Nov 23 '20 at 17:35
  • @Dev Updated answer. Let me know if it helps at all – lime Nov 23 '20 at 20:08
0

.my-icon::before {
 content: 'I';
}

.circle {
  background-color: gray;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  padding: 1.0rem;
}
<span class="circle my-icon">
</span>
Chiara Ani
  • 918
  • 7
  • 25