スポンサーリンク

スポンサーリンク

ブログ

Webアイコン(FontAwesome)を使ってみよう!

2018年9月14日

シェア
  • 2018年9月23日
    『応用編』Webアイコンと数字を組み合わせる」を追記しました。
  • 2018年9月29日
    『応用編』-サンプル4を追記
 
以前ご紹介したFontAwesomeですが、詳しく使い方を説明していなかったので今回は使い方を詳しく説明してみたいと思います。

「FontAwesomeってなに!?」という方はこちらを参考にしてください。

 


FontAwesome | https://origin.fontawesome.com/

 

 

スポンサーリンク

 

 

FontAwesomeを使うための準備

FontAwesomeを使うための準備をします。

 

表示させるためのコード

FontAwesomeのサーバーからデータを読み込んでブログに表示させます。
まずはサーバーから読み込んで表示させるためのコードを取得します。

1 FontAwesomeのページに移動してください。

2 FontAwesomeのページ上部の『How to Use』をクリック。

スマホの場合

左上のをクリック⇒『How to Use on the Web』⇒『Getting Started』の順番で進んでください。

3 表示されたページの赤枠部分のコードをコピー

4 コピーしたコードを自分のサイトの〈HEAD〉~〈/HEAD〉間に挿入してください。

 

表示させるためのコード

コードを載せておきますが、バージョンが変わったりするため、導入される場合はFontAwesomeのページから最新のコードをコピーしてお使いください。

 

ページでFontAwesomeを使う

では実際にWebアイコンをページ(記事)内で使ってみましょう。

1 FontAwesomeのページに移動してください。

2 FontAwesomeのページ上部の『Icon』をクリック。

スマホの場合

左上の⇒『Icon』をクリックしてください。

3 アイコンの一覧が表示されるので使いたいアイコンをクリック。

検索して探す場合

一覧の上に検索枠があり、アイコンを検索して探すことができます。アイコンを検索する場合は英語で検索してください。

4 アイコンのページが表示されますので、アイコン名の下の中央あたりにあるアイコンのコードをコピーしてください。

5 アイコンのコードをコピーしたら、記事の使いたい箇所にコピーしたコードを挿入してください。

 

サンプル

※上記では〈i〉タグを使用していますが、divやspanタグでも使えます。
div、spanタグにclass="アイコンコード"を入れてください。

 

スポンサーリンク

 

 

色や大きさ、動きを変える

WebアイコンはCSSを使用して文字と同じように色を変えたり、大きさを変えたりすることができます。

またFontAwesomeにはアイコンの大きさを変えたり、動きをつけたりできる『クラス』があります。
※複数のクラス(class)指定は半角スペースで区切ります。

 

色を変える

色を変えるには文字と同じようにCSSで変恋します。

※色を指定するクラス名はご自分でわかりやいものをお使いください。

 

アイコンの幅を揃える

指定しない場合のサンプル
HOME
CARET
BOOK

アイコンの幅を揃えるためにはfa-fwというクラスを追加します。

指定した場合のサンプル
HOME
CARET
BOOK

 

大きさを変える


(左からxs、sm、lg、2倍、3倍、4倍)

fa-サイズを入れると大きさを変えることができます。
サイズの指定:xs / sm / lg / 数値x

CSSのfont-sizeでも大きさを変えることができます。

 

回転

fa-spinを使うとアイコンを回転させることができます。
わかりやすく2倍で回転させています。

 

重ねる

これは の2つのアイコンを重ねています。

fa-stackを使うと2つのアイコンを重ねることができます。

Point
  • fa-stackで囲み(サンプルはspan使用)、下になるアイコンをfa-stack-2x(2倍)で最初に指定、上になるアイコン をfa-stack-1x(1倍)であとにと指定します。
  • わかりやすくコードを改行してありますが、span、iタグは繋げてください。
    改行が入っていると重なりません。

 

 

応用編

組み合わせて使えばいろいろできます。
以下はほんの一部の応用編です。参考程度に。

サンプル1

サンプル2

サンプル3

2018年9月29日 追記

サンプル4

使用アイコン: (2倍・赤)・ (1倍・白)

 

2018年9月23日 追記

Webアイコンと数字を組み合わせる

Webアイコンと数字を組み合わせて、 で囲んだ数字もできます。

丸で囲んだ数字

2

四角で囲んだ数字

3

 

 

最後に

WordPressにはWebアイコンを簡単に使えるプラグインがありますが、この方法の方がいろいろなことに使えると思います。

Webアイコンを使うとわかりづらいリンクや見出しがわかりやすくなったりします
文字だけより読んできれる人の目を引きますし、読んでくれるユーザーも読みやすくなると思います。

ぜひ使ってみてください。

 
こちらの記事も参考にどうぞ!

 

スポンサーリンク

 

フォロー

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら Contact

 

ブログサークル
ブログにフォーカスしたコミュニティーサービス(SNS)。同じ趣味の仲間とつながろう!

 

おすすめ

おすすめ

       
シェア

-ブログ
-

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.