[解決済み] Font Awesomeのアイコンを円形にする？

質問

あるプロジェクトでfont awesomeを使っているのですが、font awesomeのアイコンを使ってやりたいことがあるのですが、こんな風に簡単にアイコンを呼び出すことができます。

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

すべてのアイコンを常にボーダー付きの丸い円形にすることは可能でしょうか？こんな感じの、絵があります。

使用方法

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

しかし、問題はアイコンが常にテキストまたは横の要素より大きいことです。

解決方法は？

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 0 2px #888;
  padding: 0.5em 0.6em;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>