如何繪製圍繞引導glyphicons心臟圖標圈

紅圈應該出現以防萬一心臟圖標，如：如何繪製圍繞引導glyphicons心臟圖標圈

我試圖

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

CSS：

.details-favoriteicon { 
    color: crimson; 
}

但這沒有圓圈畫心。使用ASP.NET MVC4引導程序3，glyphicons，fontawesome，jquery ui，0124。

來源

2016-07-13 Andrus

爲什麼你會想到改變顏色神奇地作圓圈出現？ –

Fontaawesome和Glyphicons不包含心臟圖標周圍的cricle。我正在尋找一種方法來使用css或其他方式在心臟周圍繪製圓圈。 – Andrus

'width：100px;高度：100像素; border-radius：100px;'會形成一個圓圈。 – Andrew

.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顏色需要。

來源

2016-07-13 14:33:47

您可以使用下面的CSS：

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

來源

2016-07-13 14:35:56

你可以嘗試這樣的事情：

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

來源

2016-07-13 14:36:19

使用border: 5px solid crimson;，然後應用border-radius: 50%;

從那裏你ju 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>

來源

2016-07-13 14:37:11 4castle

試試這個。調整填充到你的圖標 1的大小一個div添加到錨

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

來源

2016-07-13 14:39:46

如何繪製圍繞引導glyphicons心臟圖標圈

回答

相關問題