0

I am using icomoon for my icon fonts. Some icons are circular in shape. Is there a way that I can draw a circular border around the icon shape?

I've tried targeting the icon and adding a border to it, but it draws as a box border. Is there a way I can target the shape itself?

HTML

<span class="icn icn-clock-circle" style="border: 1px solid red;">::before</span>

CSS

.icn-clock-circle:before {content: "\e9dd";}

Here is a screenshot

Thank you for any help.

Community
  • 1
  • 1
jmchauv
  • 147
  • 17

2 Answers2

3

Yes, put a border-radius on your ::before element:

.icn-clock-circle::before {
    content: "\e9dd";
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: red solid 1px;
}

You will have to adjust the width and height values to the size of the icon, as you didn't provide enough HTML/CSS.

disinfor
  • 10,865
  • 2
  • 33
  • 44
1

You can curve borders by using border-radius. For a circle, I would typically use border-radius: 50%;

Read more about how to curve different corners on W3Schools

Halden Collier
  • 845
  • 7
  • 18