边框半径不会改变内容

Question

我试图获得一个边框半径来圈出你看到的绿色框，但是它没有用，而且我正在使用border-radius: 50%; ..但是我是不完全确定我是否正确地做到了这一点。

CSS：

.fa-circle-o:before{
    content:"\f10c"; 
    color: #4c9628;
    padding-right: 5%;
    border-radius: 50%;
}

HTML：

<p class="rank fa-circle-o">yo rank</p>

它显示的内容：

任何想法？

Answer 1

因为你的内容是一个角色，所以没有边界可供使用。试试这个

.fa-circle-o:before{
    content:" "; 
    margin-right: 5px;
    border: 1px solid #4c9628;
    height: 11px;
    width: 11px; 
    display: inline-block;
    border-radius: 50%;
}

Answer 2

看起来该类属于FontAwesome。这是一个伪元素，除了Unicode字符外没有任何内容。由于没有背景或边框，您将不会注意到半径。它看起来像你没有加载图标字体，因为没有找到字符时显示的标准错误方块是可见的。

加载字体后，它应如下所示：并且没有理由再使用边框半径。

编辑：您的p标记也需要fa类。如果添加fa类不起作用，请仔细检查您是否正在导入正确的FontAwesome样式表。您的完整元素应如下所示：

<p class="rank fa fa-circle-o">yo rank</p>