アイコンフォントを使用するときにFont Awesomeを使う時の注意点です。
Bootstrapを使い慣れるとBootstrap以外のコードでもフロート対象にpull-leftやpull-rightのクラス名を使ってフロートを設定することもあると思います。
Font AwesomeのCSSにはこれらのクラス名が使われています。
.pull-right {
float: right;
}
.pull-left {
float: left;
}
メディアクエリ使用時などに予期せぬところで不具合が出る可能性がありますので注意しましょう。
例えば以下の例です。
メディアクエリを使用したサンプル
このサンプルでは表示領域が768px以上になったらフロートがかかり、画像の横に文字が流し込まれます。
768px未満の場合は画像の下に文字が表示されます。
HTMLコード
<p><img src="dog01.png" alt="" class="pull-left"></p> <p>ああああああああああああああ・・・</p>
CSSコード
@media(min-width:768px){
.pull-left{
float:left;
}
}
Font Awesomeのリンクを付け加えたサンプル
表示幅を768px未満にしてもフロートがかかったままになります。
HTMLコード
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
