htmlcsssvgicon-fonts

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.

Solution

  • 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.