如何围绕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或者更多,对于circle,border-radius:50%完美无缺

现在,为了给你的Font-Awesome图标一个圆形的背景效果,你可以这样做:

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

}

然后使用媒体查询,您可以为不同的屏幕分辨率更改这些属性.