Как нарисовать круг вокруг значка бутстраповского glyphicons сердца

Question

Красного круг должен появиться Arround значка сердца, как:

Я попытался

 <a href="/myurl"> 
      <span class="glyphicon glyphicon-heart details-favoriteicon" aria-hidden="true"></span> 
     </a> 

CSS:

.details-favoriteicon { 
    color: crimson; 
} 

Но это рисует сердце без круга.

Бутстрап 3, глификоны, fontawosome, jquery ui, ASP.NET MVC4.

Answer 1

.details-favoriteicon { 
    border: 3px solid #ff0000; 
    padding: 12px; 
    border-radius: 900px; 
    color: #ff0000; 
    font-size: 24px; 
} 

Единственная проблема, которую я вижу, что глифы не все занимают одинаковую ширину и высоту, так что вы можете увидеть некоторые несоответствия. Я также рекомендую вам применять это в качестве более многоразового класса, как:

.glyphicon-border { 
     border: 3px solid #000; 
     padding: 12px; 
     border-radius: 900px; 
     font-size: 24px; 
} 

И затем переопределить border цвета по мере необходимости.

Answer 2

Вы можете использовать следующий CSS:

.details-favoriteicon{ 
    border: 5px solid #ea212d; 
    border-radius: 50%; 
    color: #ea212d; 
    font-size: 60px; 
    padding: 7px 12px 4px 7px; 
} 

Answer 3

Вы можете попробовать что-то вроде этого:

.details-favoriteicon { 
 
    color: crimson; 
 
    border: 3px solid crimson; 
 
    border-radius: 100%; 
 
    padding: 5px; 
 
    text-align: center; 
 
    font-size: 20px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<a href="/myurl"> 
 
    <span class="glyphicon glyphicon-heart details-favoriteicon" aria-hidden="true"></span> 
 
</a>

Answer 4

Использование border: 5px solid crimson;, а затем применить border-radius: 50%;

Оттуда ты, я st должны подстроить font-size и padding, пока он не подходит.

.glyphicon-heart { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    padding: 12px 0 0 7px; 
 
    
 
    font-size: 70px; 
 
    color: crimson; 
 
    border: 5px solid crimson; 
 
    border-radius: 50%; /* circle */ 
 
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
<span class="glyphicon glyphicon-heart details-favoriteicon" aria-hidden="true"></span>

Answer 5

Попробуйте это. Настройка отступов до размера значка 1. Добавьте DIV к якорю

.circle{ 
    border: 1px solid #559CAD; 
    border-radius: 50%; 
    padding: 35% 5%; 
    }