如何用CSS3在字体图标周围画一个圆圈？

我想在我想画的图标周围画一个css3圈。我在使用任何其他css之前使用meyers重置：

我无法得到我想要的效果。这是我的css：

i {
  display: inline-block;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 50px;
  -moz-box-shadow: 0px 0px 2px #888;
  -webkit-box-shadow: 0px 0px 2px #888;
  box-shadow: 0px 0px 2px #888;
border: 3px solid red;
}

<i>H</i>

i{
显示：内联块；
-moz边界半径：60px；
-webkit边界半径：60px；
边界半径：50px；
-moz盒阴影：0px 0px 2px#888；
-网络工具包盒阴影：0px 0px 2px#888；
盒影：0px 0px 2px#888；
边框：3倍纯红；
}
H

如果可能的话，使其具有响应性。最好的方法是什么？

---

如果可能的话，当用户调整大小时，让圆圈和文本自行调整大小将是很好的。如果你想让它响应，那么你不应该使用边框半径：60px或其他什么，对于圆圈，边框半径：50%就完美了

现在，为了给你的字体图标一个圆形背景效果，你可以这样做：

.fa {background: #fcc;
padding: 1em;
text-align: center;
display: inline;
border-radius: 50%;}

但这里的问题是，字体图标的宽度或高度不相等，因此可能会出现倾斜圆（椭圆形状）的问题

为了防止出现这种情况，您可以进行如下修复：

 .fa {background: #fcc;
    padding: 1em;
    width:50px; /** fix width ***/
    text-align: center;
    display: inline;
    border-radius: 50%;
    line-height: 50px;  /** for vertical center - if needed **/
}

---

然后使用媒体查询，您可以根据不同的屏幕分辨率更改这些属性。

制作圆的简单理论是，您需要定义高度、宽度和半径必须相等的值。i、 e.高度：50px，宽度：50px，边界半径：50px。

另一个选项是有两个单独的层；一个用于圆圈，另一个用于您想要使用的字体。代码如下：

.circle{
    border:2px solid orange;
    background-color:gray;
    border-radius:100px;
    width:100px;
    height:100px;
    text-align:center;
}

.fa {
    color:white;
    line-height:100px;
}

还有HTML

<div>
    <div class="circle">
    <i class="fa fa-spinner fa-spin"></i>
    </div>
</div>

这里还有一个很好的例子，但是很明显，那些很棒的字体在那里不起作用。顺便说一句，这不是一个响应迅速的解决方案。

一个解决方案就是不要试图在图标本身的大小上匹配您的填充/边框/背景等。通过将两者隔离，您可以分别控制图标的字体大小和圆形背景外观，以达到响应的目的

这是密码笔：

HTML

<ul class="list">
  <!-- Facebook Icon -->
  <li class="list__item social">
    <a href="#facebook" class="list__icon list__icon_social"><i class="icon_social fa fa-facebook-square"></i></a>
  </li>
  <!-- Child Icon -->
  <li class="list__item">
    <a href="#facebook" class="list__icon list__icon_social"><i class="icon_social fa fa-child"></i></a>
  </li>
  <!-- PayPal Icon -->
  <li class="list__item">
    <a href="#facebook" class="list__icon list__icon_social"><i class="icon_social fa fa-cc-paypal"></i></a>
  </li>

</ul>

---

您必须在之前设置边框。边框紧靠“H”并不是圆形的。边框必须与半径一样大，请参见此处：。是的，椭圆形状非常有问题，因此您说每个图标必须指定一个固定的宽度，并且没有“一刀切”的情况，宽度对于.fa类来说是常见的，它将应用于所有fontawesome图标。@Rolando是的，没有办法为不同大小的图标（例如20px 30px 40px等）创建具有边框半径的“全局”解决方案。这是因为边界半径是如何工作的（它只是带有圆角的边界）。要使其成为圆形，必须使元素为方形，并且没有全局方法使元素为方形。你必须指定宽度和高度，或者使用一些技巧，例如：将行高设置为与宽度相同等。。。但还有其他方法可以添加圆形图标并在使用该图标之前创建样式，然后使用绝对位置将其移动到图标上。这并不漂亮，但它会起作用。@Rolando如果你很活跃，那么你可以接受正确的答案来结束这个问题。

/* Remove default list styling */
ul { 
  margin: 0;
  list-style: none;
  padding: 0;
}

.list {}

.list__item {
  display: inline-block;
}

.list__icon {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

.list__icon_social {
  text-align: center;
  border-radius: 50%;
  background-color: #0066FF;
  color: #fff;
  padding: 3rem;
  font-size: 2rem;
}

.icon_social {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}