CODEWITHSUNDEEP
htmlcsssvgicon-fonts
jmchauv
jmchauv

Reputation: 147

Possible to draw css border around icon font that is a circle shape?

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.

Upvotes: 0

Views: 1674

Answers (2)

Halden Collier
Halden Collier

Reputation: 862

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

Upvotes: 1

disinfor
disinfor

Reputation: 11533

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.

Upvotes: 3

Related Questions