如何在引导 glyphicons 心形图标周围绘制圆圈 [重复]答案

【问题标题】：How to draw circle around bootstrap glyphicons heart icon [duplicate]如何在引导 glyphicons 心形图标周围绘制圆圈 [重复]
【发布时间】：2016-11-16 04:58:22
【问题描述】：

红色圆圈应该出现在心形图标周围，例如：

我试过了

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

CSS：

.details-favoriteicon {
    color: crimson;
}

但这会画出没有圆圈的心。

使用了Bootstrap 3、glyphicons、fontawesome、jquery ui、ASP.NET MVC4。

【问题讨论】：

为什么你会期望改变颜色会神奇地出现一个圆圈？
Fontaawesome 和 Glyphicons 不包含心形图标周围的 cricle。我正在寻找一种使用 css 或其他方式在心脏周围绘制圆圈的方法。
width:100px; height:100px; border-radius:100px; 会绕圈子。
@Andrew 我把班级改成了.details-favoriteicon { color: crimson; width:100px; height:100px; border-radius:100px; } ，但没有出现圆圈

标签： css twitter-bootstrap twitter-bootstrap-3 font-awesome glyphicons

【解决方案1】：

使用border: 5px solid crimson;，然后应用border-radius: 50%;

从那里你只需要调整 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>

【讨论】：

【解决方案2】：

试试这个。将填充调整为图标的大小 1.给锚点添加一个div

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

你可以使用下面的css：

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

【讨论】：

【解决方案5】：

.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 颜色。

【讨论】：