font awesomeでアイコンが大きくならない

Question

font awesomeを使ってアイコンを表示したのですが、大きさを公式サイトの方で紹介されているfa-5xなどよりも大きくしたいです。

<i class="fa fa-clock-o fa-5x" aria-hidden="true"></i>
<i class="fa fa-money" aria-hidden="true"></i>
<i class="fa fa-cutlery" aria-hidden="true"></i>

.fa-5x{
	font-size:300px;
}

このように記述しているのですが、要素検証をすると、

.fa-5x {
    font-size: 5em;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
}

このような表記になっており5em以上の大きさに出来ません。
どうすればもっとアイコンを大きく表示出来ますでしょうか。
どなたか助けて頂きたいです。

Answer 1

fa-5xを外せば 通常のfont-sizeで指定できますよ..（en以外）
idを振るか別にclassを追加してマルククラスにするなどされてはいかがでしょうか？

<i class="fa fa-clock-o fa-5x" aria-hidden="true"></i>
↓
<i class="fa fa-clock-o classname" aria-hidden="true"></i>

.classname {
    font-size: 300px;
}

Comments

[hayahiro]

class名を振るやり方だとcssで反映されませんでしたが、id名を振るやり方でできました。本当に助かりました、ありがとうございます。

Answer 2

.fa-5x{
    font-size:300px !important;
}

Comments

[hayahiro]

できました。important と打つやり方は初めてでしたので勉強になりました、本当にありがとうございます。