こんにちはtaka(@taka26817539)です！
突然ですが「Font Awesome」って聞いたことありますか？
僕も実際にブログで使用していますが、Font Awesomeでは下記のようなアイコンフォントを無料で使用できるというサービスです。
こちらのアイコンフォントはWEB上で文字と同じ扱いで使用することができるといったものになります。
有料のアイコンもありますが、全部で7000種類ほどあるようです。
本記事では実際にこちらのアイコンを無料で使用する方法を紹介していきたいと思います。
- 無料でアイコンフォントを使う方法
- アイコンフォントの応用法
Font Awesomeの使い方
ここからFont Awesomeの使い方を紹介していきます。
準備
まずはFont Awesomeを利用するにあたって、簡単な準備が必要です。
約5分で終わりますよ！
Font Awesomeのアカウント作成
まず、Font Awesomeのアカウントを作成します。
公式サイト：Font Awesome
[Start for Free]をクリックします。
このような画面が表示されるので、自分のメールアドレスを入力して[Send Kit Code]をクリックします。
すると、入力したメールアドレスに確認のメールが送られて来るので確認を済ませましょう。
アカウント作成はここまでで完了です。
コードの取得・貼り付け
アカウント作成が完了したら、Font Awesomeにログインします。
公式サイト：Font Awesome
画面上部のメニューから[Start]を選択すると、上記のような画面が表示されます。
プロジェクトの名前は好きなもので良いので、自分で決めましょう。
入力が済んだら[Create&Use This Kit]をクリック。
するとこのようにJavaScriptのコードが表示されますので、[Copy Kit Code]をクリックしてコピーしておきます。
コピーしたコードを、サイトやブログの<head>タグ内に貼り付けてあげることでアイコンフォントを使用できるようになります。
僕のブログはWordPressで運営していますので、WordPressでの貼り付け方を紹介します。
WordPressの[テーマエディター]に移動し、親テーマから[header.php]を選択します。
そして</head>というタグを見つけたら、その真上に先ほどコピーしたコードを貼り付けましょう。（僕の場合もう一つのコードがありますが気にしないでください）
これで保存したら準備は完了となります。
補足
以下のコードは現在は公式配布されていないようですが、バージョンの数字を自身で直していただくとCSS編集でFont Awesomeが使えるようになります。非常に便利なので、先ほどのコードと同じように<head>タグ内に貼っておくと良いと思います。
こちらについても後ほど説明します。
<rel='stylesheet' link href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" crossorigin="anonymous">アイコンフォントを実際に使う
ここからは実際にアイコンフォントを表示して使う方法を説明します。
公式サイト：Font Awesome
画面上部のメニューから[Icons]を選択すると、上記のような画面が表示されます。
検索ボックスに使いたいアイコンフォントに関連するワードを入力すると、たくさんのアイコンフォントが表示されます。
その中で気に入ったアイコンをクリックします。
このようなページが表示されますので[Start Using This Icon]をクリック。
このようなウィンドウが表示されたら、コード右下の青いアイコンをクリックもしくはコードを選択してコピーしておきます。
サイトやブログのHTML編集から先ほどコピーしたコードを表示したい部分に表示したら完成です。
補足について
補足でも書いたように、CSS編集でFont Awesomeが使えるようになる方法もあり、まとめてテーマ全体に適用したい場合などに便利です。
こちらの方法はCSSの知識が必要です。慣れていない方はテーマが崩れる可能性もあるので注意して行なってください。
それでは実際に使い方を説明します。
使いたいアイコンフォントを選択した画面の左上にある「Unicode」という英数字を覚えておきます。
テーマエディタの小テーマなどから、CSSを編集できる部分に移動します。
以下に参考コードを貼っておきます。
.class {
font-family: "Font Awesome 5 Free";
content: "\f0a4";/*アイコンのUnicode*/
}こちらのコードをコピー＆ペーストして、Class・Id名の交換、Unicodeを覚えたものと交換すればOKです。
僕の場合、Font Awesomeを使用してH2の見た目を編集しています。
僕の場合はチェックマークを使用しています！
コードも書いておきます。
/* H2 */
.article h2{
border-top:none;
border-bottom:none;
position: relative;
color: white;
background: #00a0e9;
line-height: 1.4;
padding: 0.5em 0.5em 0.5em 1.8em;
}
.article h2:before {
font-family: "Font Awesome 5 Free";
content: "\f14a";
position: absolute;
left : 0.5em;
}よければ参考にしてみてください。
まとめ
本記事ではFont Awesomeの使い方について書きました。
LINEやFacebookのアイコンもありますよ！
かなりたくさんのアイコンフォントがありますのでお気に入りの物を探してみてください。
コメント