Use svg icon inside a css circle

Question

I want to create a circle and inside that circle I want to add an svg image in the middle of the circle. So I tried this:

  .treatment-methods__icons{
    display:flex;
    flex-wrap: wrap;
   
  }
.treatment-method__icon__container{
  flex: 1 0 21%; 
  margin: 5px;
  height: 100px;
  background-color: red;
}
  .treatment-methods_icon{
    vertical-align: middle;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #ffffff;
  }

My layout consists of 4 objects, for some reason border-radius: 50% does not work and we keep seeing rectangles, what am I doing wrong?

FluffyKitten · Accepted Answer

There are 2 problems:

You are not setting a border radius on the red rectangle, that's why you keep seeing rectangles instead of circles.
Also, to be a circle the rectangle needs to be square before adding the border radius, which it won't be when you are using flex and setting a fixed height. If it is not square, you will get ovals instead of circles.

Therefore you will need to add another container for the red circle and place it inside the flex container. As your image has a fixed height & width, you can set a fixed height and width on this container too to make it square.

You need to remove the border-radius: 50%; from your flex container (i.e. treatment-method__icon__container) and use something like this for the new outer class:

.treatment-method__icon__outer_circle {
  background-color: red;
  /* Set the height & width to be the same, so the container is square */
  width: 80px;
  height: 80px;
  /* Add the border radius to round the corners */
  border-radius: 50%;
  /* Add padding around the image if required */
  padding: 10px;
}

The new container is 100 x 100px square as I assume you wanted an outer "border" of space around the image, but you can remove the padding if you want it exactly the same size as the image.

I have added a working example below:

.treatment-methods__icons {
  display: flex;
  flex-wrap: wrap;
}

.treatment-method__icon__container {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
}

.treatment-method__icon__outer_circle {
  background-color: red;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  padding: 10px;
}

.treatment-methods_icon {
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  color: #ffffff;
}

UPDATE - To have a non-circular image in the red circle:

If you don't want the image to be a circle also (its not clear from your question), you can remove the border-radius: 50%; from it too. You will also need to adjust the padding of your outer circle container (or make the image smaller) so the corners of the rectangular image fit inside the circle.

Use svg icon inside a css circle

Answers (1)

Related Questions