将 Font Awesome 图标做成一个圆圈？

我在某些项目中使用 font Awesome，但我想用 font Awesome 图标做一些事情，我可以轻松地调用这样的图标：

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

是否有可能所有图标始终处于带边框的圆圈中？类似这样的，我有一张图片：

Using

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

可以达到效果，但问题是图标总是比旁边的文本或元素大，有什么解决方案吗？

使用 Font Awesome，您可以轻松使用堆叠图标，如下所示：

更新：Font Awesome v6.2.1

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

更新：Font Awesome v5.15.4

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

refer 字体真棒堆叠图标 https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

更新：- 小提琴堆叠的图标 http://jsfiddle.net/sampatbadhe/ocftsLfe/