css - Font-Awesome フォントを拡大縮小するには?

Question

虫めがねのフォントを大きくしてレンダリングしようと必死になっています。以下のコードは、Firefox では問題なく動作しますが、Chrome や IE9 では動作しません。

私は何が欠けていますか？

.icon-larger
{
   font-size:50px;
}

<div class="search-icon"><i class="icon-search icon-larger"></i></div>

ありがとう！

Answer 1

このページを見て、アイコンのサイズを調整する例を確認してください。

5倍まで拡大できます。

例：

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Answer 2

Font Awesome アイコンは :after 疑似要素にフックされているため、CSS を次のようにする必要があります。

.icon-larger:before 
{
  font-size: 50px;
}

Font Awesome のすべての CSS コンテンツ値のリファレンス ページと、任意の要素でアイコンを使用する方法を示す CSS スニペットを作成しました: http://astronautweb.co/snippet/font-awesome/

Answer 3

古い質問ですが、同じ問題があり、Font Awesome css を含めるのを忘れていたようです。<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">

アイコンは引き続き表示されますが、これがない場合は拡大縮小されません。

Answer 4

追加display:blockまたはdisplay:inline-block