サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
パリ五輪
niwaka-web.com
Font Awesome 5の使い方としては、SVG with JavaScript(JavaScriptとSVGによる描画)とWeb Fonts with CSS(CSSとwebフォントによる描画)の2種類あります。 今回はFont Awesome 5で新たに増えたSVG with JavaScript(JavaScriptとSVGによる描画)の使い方を書いていきたいと思います。 ニワカが公式見ながらまとめたものなので多くを期待してはいけません。 公開からしばらく経ちダウンロードページなどが変更されていたので、一部更新しました。(Version5.5の時点) Font Awesome 5ではこれまでの使い方と同じWeb Fonts with CSS(CSSとwebフォントによる描画)もあります。そちらを利用したい方は、下記ページへ。 Font Awesome 5の使い方【Web Font
.container(固定枠)または.container-fluid(流動枠)で外枠を設定 .rowで行を設定 .col-[prefix]-[数字]でカラムを設定 [prefix]でブレイクポイントの接頭辞(xsやmdなど)を指定。 [数字]でカラムの幅を設定。1行ごとに(prefixごとに)合計で12になるように指定します。12以上になるといわゆるカラム落ちで表示されます。 グリッドシステム使用例 small(568px以上)以上の画面幅になると1行を3:6:3の3分割の3列のレイアウトになります。 568px未満では、それぞれ横100%で縦に積み重なる形でレイアウトされます。 Bootstarpはモバイルファーストなので最小サイズで、レイアウトの設定をしない場合は各列が横100%で縦に積み重なる形でレイアウトされます。 html <div class="container"> <div
Font Awesome 5の使いとしては、SVG with JavaScript(JavaScriptとSVGによる描画)とWeb Fonts with CSS(CSSとwebフォントによる描画)の2種類あります。 今回はこれまでのFont Awesome 4に近い使い方のWeb Fonts with CSS(CSSとwebフォントによる描画)での使い方を書いていきたいと思います。 基本はSVG with JavaScriptと同じですが、回転と反転など一部指定方法が違います。また、SVG with JavaScriptのみでしか出来ないこともあります。 ※公開からしばらく経ちダウンロードページなどが変更されていたので、一部更新しました。(Version5.5の時点) Font Awesome 5からの新しい使い方SVG with JavaScript(JavaScriptとSVGによる
このページを最初にブックマークしてみませんか?
『niwaka-web.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く