ブログを見ていますと、見出しやリストなどにおしゃれなアイコンが使われていることがあります。
今日は、このおしゃれなアイコンを利用するための紹介をしたいと思います。
WordPressなどにはブログを始めるための最低限のものしか基本的には入っていません。プラグインで機能を追加したり、今回初回するアイコンを追加したほうが、サイトの華やかさが違ってきますので、ぜひ参考にしていただければと思います
「簡単にウェブサイト上でアイコンを表示できるサービス」があります。
Font Awesome（フォントオーサム）というサービスになります。
こちらを使えば、今まで以上にリストデザインの幅が広がりますし、ポップなサイトに仕上がります。
FontAwesomeの使い方はとっても簡単ですよ。
おしゃれなアイコンは、下記のようになります。
Font Awesomeサイト
おしゃれなアイコンは、Font Awesomeというサイトから取得・確認することができます。
Font Awesome アイコンを使用するには、登録（無料）が必要です。
Font Awesomeの使用例
Font Awesomeは、以下の手順で使用できます。
①Font AwesomeのCSSファイルを読み込む。詳しくは、「 WEBサイトで利用する方法 」で説明します。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
②HTMLの要素タグにfaクラスとfa-アイコン名クラスを指定する。
例
<i class="fas fa-pencil-alt"></i>
<i class="fas fa-ad"></i>
Font Awesomeのサイトにアイコンごとのクラス名が載っています。
この クラス名 を HTMLの要素タグ に追加するだけで簡単にアイコンを表示させることができます。
WEBサイトで利用する方法
<link href=”https://use.fontawesome.com/releases/v5.6.1/css/all.css” rel=”stylesheet”>
手順１. CDNを使う以下のコードをコピー
手順２ サイトに取り込む
方法2.サーバーにデータをアップロード
Font Awesomeというサイトからファイルをダウンロードして自分のサーバーに反映する
利用方法
FontAwesomeでは、アイコンの大きさを簡単に変えることができます。
以下のコードをi class="〜"内に下記のクラス名を書くことでサイズを大きくすることができます。
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
コメント