Font Awsomeのアイコンにline-heightが効かない

Question

前提・実現したいこと

HTML/CSSを使ってAirbnbの模写をしているのですが、Font Awsomeのアイコンを使ったspanタグにline-heightが効いていないようです。

模写元リンク

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

以下の画面のチェックマークを正円で表示したいです。
CSSでline-height: 40pxで指定しているのですが、20pxで表示されてしまいます。

---

ソースコード

  <div class="mainC22">
    <div class="mainC221">
      <span class="fas fa-check check"></span>
      <h3>無料でお部屋を掲載</h3>
      <p>共有のリビングルームから別荘に至るまで、どんなスペースでも登録料なしで共有しましょう。
      </p>
    </div>
  </div>

.check {
  display: inline-block;
  margin-bottom: 20px;
  font-size:20px;
  width: 40px;
  line-height: 40px;
  background-color: #BFEFFF;
  border-radius: 50%;
  border-color: #767676;
  text-align: center;
}

試したこと

Inspectツールで見ると、.checkの設定が上書きされてしまっているようです。
どうしたら.checkの設定を優先させることができるのでしょうか。

Answer 1

どうしたら.checkの設定を優先させることができるのでしょうか。

!importantを付けてみたらどうですか。

  line-height: 40px!important;

Comments

[grazz]

解決しました！
ありがとうございます。