文字の丸囲みをしたいが、文字が少し真ん中からズレてしまう

Question

前提・実現したいこと

丸囲み文字
囲んでいる文字を丸の真ん中にきれいに配置したい。

発生している問題・エラーメッセージ

少しですが、左に寄っている
https://gyazo.com/166452f8a5222ec8ed843f4048803a03

該当のソースコード

<div class="cover_message">
   <i aria-hidden="true" class="fa fa-forward"></i>
   <span>申し込みまではWebで完結します！</span>
</div>

.cover_message {
   @include fontsize(30);
  i {
   @include fontsize(30);
   width: 60px;
   height: 60px;
   line-height: 60px;
}

試したこと

違うとわかりながらも・・・
iに対してtext-align: center;をしたり、
widthを縮めたり広げたりしてみました。

Comments

[tr_09]

leftで調整してもダメそうですか？？
https://www.will-hp.com/wpblog/web/157/
上記に参考URL貼っておくのでやってみてください！

[ebiko]

参考にさせていただきました。解決しました！ありがとうございます。

Answer 1

text-align: center;で真ん中にくるはずですけどね。当方のサンプルでは真ん中にきました。
padding: 0 !important; を追加してみたらどうなりますか。

.cover_message i {
  font-size: 30px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  background-color: lime;
  text-align: center;
  border-radius: 50%;
  padding: 0 !important;
}

Comments

[ebiko]

回答ありがとうございます！試してみましたが、変化しませんでした。。

[hatena19]

サンプル作成しましたが、真ん中になります。

https://codepen.io/hatena19/pen/poyVvxv

[ebiko]

なんとなく真ん中に見えず質問させていただきましたが、これが正なんですね＞＜　個人的に気になる場合はleftで調整することとします。ありがとうございました！

[hatena19]

目の錯覚で真ん中にないように見えますが、左右の余白を測れば同じです。