Радиус границы не меняется для содержимого

Question

Я пытаюсь получить радиус границы, чтобы обрезать зеленую рамку, которую вы видите, но она не работает, и я использую.. Но я не совсем уверен, что я делаю это правильно.

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

Похоже, этот класс принадлежит FontAwesome. Это псевдоэлемент, в котором нет содержимого, кроме символа Юникода. Поскольку нет фона или границы, вы не заметите радиус. Также похоже, что вы не загружаете шрифт значка, так как отображается стандартный квадрат ошибки, который отображается, когда нет символа.

Как только вы загрузите шрифт, он должен выглядеть так: , и нет смысла использовать радиус границы.

РЕДАКТИРОВАТЬ: Ваш p тег также находится в категории fa. Если добавление класса fa не работает, дважды проверьте, что вы импортируете правильный лист шрифтов FontAwesome. Ваш полный элемент должен выглядеть так:

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

Answer 2

Для этого нет границ, потому что ваш контент является персонажем. Попробуйте это вместо

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