css - 将 Font Awesome 图标制作成一个圆圈？

Question

我在一些元素中使用了很棒的字体，但是我想用很棒的字体图标做一些事情，我可以很容易地调用这样的图标:

<i class="fa fa-lock"></i>

有没有可能所有的图标总是在带边框的圆圈中？事情是这样的，我有一张图片:

使用

i {
  background-color: white;
  border-radius: 50%;
  border: 1px solid grey;
  padding: 10px;
}

会做这个效果，但问题是图标总是比文本或旁边的元素大，有什么解决办法吗？

Answer 1

借助 Font Awesome，您可以像这样轻松地使用堆叠图标:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

引用Font Awesome Stacked Icons

更新:-stacked icons 的 fiddle