戯れ言葉

くるくる回る Font Awesome The Icons

カテゴリ:FC2ブログの色々とカスタマイズとか
タグ:

Font Awesome The Icons
この記事を書いている現在のバージョンは 4.7.0 です。

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

で、反映されてます。
Atom + HTML Preview でもHTML内に上記を書けばOKです。

Font Awesome The Icons は、なんか楽しそうなアイコン(絵文字)が一杯あるので眺めていると Spinner Icons の欄に

These icons work great with the color: fa-spin class. Check out the spinning icons example.

と云う記述があり
リンク部分(アンダーバーの部分)をクリックしてみると
五つのアイコンがぐるぐる回ってます。

こんな感じ  Loading...

このアイコンのコードはこう

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> <span class="sr-only">Loading...</span>

このコードの内 fa-3x がアイコンの大きさを設定しているのですが、1.5倍とかの小数点の倍率は設定できなくて、でもそんな大きさが欲しいんですよね。
で、 font-size で指定してみるとちゃんと反映されました。

font-size を150% で指定すると Loading... んな感じ

アイコンを文字列の縦の真ん中に

持って行きたくて Loading... なんてやって見る。

最終のコード

<i class="fa fa-spinner fa-pulse fa-fw" style="font-size: 150%; vertical-align: middle;"></i><span class="sr-only">Loading...</span>

でも縦位置は元のままの方が自然かも

私のスマホはAndroid 5.0.2 ですが、ちゃんと表示されます。

Comments 0

There are no comments yet.

Leave a reply
コメントをどうぞ

ブログやホームページのURLをどうぞ

パスワードを入力すると投稿後、訂正・削除が出来ます