css - 如何在 Font Awesome 图标周围用 CSS3 制作一个圆圈？

Question

我想在我要绘制的图标周围制作一个 css3 圆圈。我在任何其他 css 之前使用 meyers 重置:http://meyerweb.com/eric/tools/css/reset/reset.css

我无法获得我想要的效果。这是我的 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>

如果可能的话，让它响应。做这个的最好方式是什么？如果可能的话，最好让圆圈和文本在用户调整大小时自行调整大小

Answer 1

如果你想让它具有响应性，那么你不应该使用那个border-radius:60px 或其他任何东西，对于圆形，border-radius:50% 效果很好

现在要给你的 Font-Awesome 图标一个圆形背景效果，你可以这样解决:

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

但这里的问题是， Font Awesome 图标的宽度或高度不相等，因此您可能会遇到斜圆(椭圆形)的问题

为了防止这种情况，您可以进行一些修复，例如:

 .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 **/
}

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