【分かりやすい】アイコンを簡単にhtmlで使える FontAwesome【まとめ】

【分かりやすい】アイコンを簡単にhtmlで使える FontAwesome【まとめ】
Pocket

今回、この記事ではWebデザインで使用するアイコンを簡単にhtmlに埋め込めるFontAwesomeの使い方についてご紹介したいと思います。

FontAwesomeとは?

FontAwesome(フォントオーサム)とは、アイコンを簡単にhtmlに組み込んで、簡単に色やサイズ、動きを加えることもできます。

なので、アイコン画像をいちいち作ったり、ダウンロードしたりする手間が省けて効率化が図れます。

しかも、FontAwesomeのアイコンは拡大しても画像が荒れたりぼやけたりしません。

ちなみに、無料版と有料版がありますが、無料版でも全然問題ないです。

簡単に無料でhtmlに組み込みアイコンとして使えるので、ぜひ利用してみて下さい。

Advertisement

FontAwesomeの使い方

上のアイコンが使用例です。拡大しても綺麗ですね。

Cssのクラス属性を書き加えるだけで、このようにアイコンを回転をさせたり、サイズを変えたりもできます。では具体的にFontAwesomeの使い方をみていきましょう。

FontAwesomeのサイトに行く


fontawesome

https://fontawesome.com/

まずは上のURLからサイトの方に飛びます。

無料で使う場合は、左の「Start Using Free

有料で使う場合が「Get More with Pro」になります。

僕は無料を使っているので、今回は無料での使い方をご紹介したいと思います。

では、左の「Start Using Free」を押して進みましょう。

スタイルシートをHTMLの<head>タグ内に埋め込む


fontawesome

この画面に進みましたね。


fontawesome

では、画面中央の黒のボックス内の<link>タグをhtmlの<head>タグ内に埋め込んで下さい。

これでネット上からアイコンを読み込んで使用することができます。

では、アイコンを探すために、上のメニューの「Icons」をクリックしてアイコンページに行きましょう。

アイコンをHTMLに埋め込む


fontawesome

この画面に進みましたね。

無料でアイコンを使用する際には、左のサイドバーの「Free」にチェックを入れましょう。

そうすると、Freeで使用できるアイコンしか表示されないので探すのが簡単になるのでオススメです。

使うアイコンを選択


fontawesome

今回僕は、ビットコインのアイコンを使います。

使いたいアイコンが決まったらクリックして進んで下さい。

すると、この画面に進みます。


fontawesome

では、実際に埋め込むURLはどこにあるの?

それは、左に数十倍デカく表示されているアイコンの上に<i>タグの表記がありますが、そこをクリックするとコピーできます。

または、画面右の「Start Using This Icon」を押すと<i>タグが表示されるので、

その<i>タグをコピーします。


fontawesome

HTMLのアイコンを入れたい場所に<i>タグを埋め込む


fontawesome

こんな感じで埋め込みます。

そのまま、使いたい場所に埋め込むだけなので簡単ですね。

すると、、

上手く表示されましたね。(上のアイコンは色やサイズを変えています)

基本的な使い方は以上になります。

そのまま埋め込むとアイコンは小さく、黒色で表示されるので次のトピックでは、クラス属性を追加するだけでアイコンサイズを変えたり、動きを付けたり出来るので、応用編として紹介します。

追記


fontawesome

ちなみに、<i>タグにクラス属性がついていますが、

fabはブランドのアイコンに使われるクラス属性です。その他はfasです。

fa-btcは個別に付けられているクラス属性なので、このクラス属性をCssで編集すると色を付けたり、サイズを変えたりすることもできます。

Cssに慣れている方は、こちらをオススメします。


fontawesome
Advertisement

アイコンのサイズ、動きを付ける【応用編】

応用編では実際にアイコンを編集して使用していきます。

ちなみに、<i>タグにクラス属性を加えるだけで編集できるので簡単ですね。

種類がいっぱいあるので、種類別でまとめてみます。

固定幅

アイコンによって幅が違うところを固定幅によって同じ幅にすることができます。アイコンを縦一列に並べ、横に文字書いてあると幅が違うことが分かりやすいですね。

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow

では、幅を整えます。幅を整えるには、<i>タグのクラス属性に

fa-fw」を加えます。これだけです。

例 <i class=”fas fa-skating fa-fw“>

Skating
Skiing
Nordic Skiing
Snowboarding
Snowplow

サイズ

サイズを変更します。

サイズを変更するには下記のクラス属性を加えます。

加えた結果は上になります。

例 <i class=”fab fa-btc fa-fw fa-5x“>

クラス属性サイズ
fa-xs.75em
fa-sm.875em
fa-lg1.33em
fa-2x2em
fa-3x3em
fa-4x4em
fa-5x5em
fa-6x6em
fa-7x7em
fa-8x8em
fa-9x9em
fa-10x10em

回転

アイコンを回転させることもできます。

クラス属性を<i>タグに加えるだけなので簡単ですね〜

例 <i class=”fab fa-btc fa-fw fa-5x fa-rotate-180“>

クラス属性回転量
fa-rotate-9090°
fa-rotate-180180°
fa-rotate-270270°
fa-flip-horizontal水平に回転
fa-flip-vertical垂直に回転

アニメーション

今度はずっと回転したりするクラス属性を紹介します。

面白いアニメーションですね。

FontAwesomeだけでアイコンにアニメーションを付与できるのは便利ですね。

例 <i class=”fab fa-spinner fa-fw fa-5x fa-rotate-180 fa-spin“>

クラス属性回転の仕方
fa-spinスムーズに回転
fa-pulse8ステップで回転

アイコンを重ねる

FontAwesomeでは、2つのアイコンを重ねて表示することも出来ます。

下のツイッターアイコンも下のコードで重ねています。



例 <span class=”fa-stack fa-2x”>

<i class=”fas fa-square fa-stack-2x“></i>

<i class=”fab fa-twitter fa-stack-1x fa-inverse“></i>

</span>

使い方

親要素のタグに「fa-stack 」のクラスを入れます。

子要素のタグで重ねた時に下に置きたいアイコンには「fa-stack-2x」を、

上に重ねたいアイコンには「fa-stack-1x fa-inverse」をクラス属性に付与します。

fa-inverse」はfa-stack-1xの時に使うことで、ノックアウト効果があるようです。

クラス属性重ね順
fa-stack-1x fa-inverse
fa-stack-2x

親要素に「fa-stack 」のクラス属性追加を忘れないようにしましょう。

まとめ

簡単にアイコンをhtmlに組み込むことが出来ましたね。

画像をいちいちダウンロードして使ったりしなくて済むので導入も簡単ですね。

FontAwesomeを活かしてデザインの幅を広げていきたいですね。

FontAwesomeのサイトにも詳しい説明が載っているので、参考に見てみてください。

別の記事では、FontAwesomeのアニメーションで揺れる動きなど多彩な動きをできる方法があるのでまた、ご紹介したいと思います。

過去の記事にGoogle Webフォントの使い方やアドビWebフォントの使い方も記載しているので、興味のある方はぜひ見てみて下さい。

Advertisement

記事を読んで頂きありがとうございました。

Pocket