可以在圆形图标字体周围绘制css边框吗？答案

【问题标题】：Possible to draw css border around icon font that is a circle shape?可以在圆形图标字体周围绘制css边框吗？
【发布时间】：2019-08-20 16:21:23
【问题描述】：

我使用 icomoon 作为我的图标字体。有些图标是圆形的。有没有办法可以在图标形状周围画一个圆形边框？

我尝试定位图标并为其添加边框，但它绘制为框边框。有没有办法可以定位形状本身？

HTML

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

CSS

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

感谢您的帮助。

【问题讨论】：

标签： html css svg icon-fonts

【解决方案1】：

是的，在您的 ::before 元素上添加一个 border-radius：

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

您必须将 width 和 height 值调整为图标的大小，因为您没有提供足够的 HTML/CSS。

【讨论】：

打败我！ :P

【解决方案2】：

您可以使用border-radius 来弯曲边框。对于一个圈子，我通常会使用border-radius: 50%;

在W3Schools上阅读更多关于如何弯曲不同角落的信息

【讨论】：