エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
ありきたりなグローバルメニュー、見慣れたサイドバー、文字だけが綴られた記事……。
このように、お馴染みのWebサイトを制作するのも大切ですが、あまりにも似通ったコンテンツだと読者の記憶に残りません。
そこで取り入れたいのが、アイコンフォントの「FontAwesome5」。これを使えば、オシャレで絵文字のようなテキストを簡単に実装できます。
さっそく、「FontAwesome5」の使い方や実装方法を見ていきましょう！
FontAwesome5とは？
「FontAwesome5」とは、アイコンを文字として扱えるアイコンフォントの一種です。HTMLやCSSファイルに少しコードを書き加えるだけで、シンプルな文字だけが並ぶメニューへ目立つアイコンを加えられ、見た目が華やかになります。
また「FontAwesome5」は素材の用意もいっさい不要。自前で用意する必要がある写真画像とは異なり、ファイルを読み込むだけで誰でも簡単に利用できます。
さらに、無料で使い始められるのも大きなメリット。有料版も用意されていますが、個人が趣味で使うレベルなら無料版でも問題ありません。
FontAwesome5の使い方
「FontAwesome5」は以下の方法で導入できます。
- CDNサービスを介して利用する方法
- 直接ファイルを公式サイトからダウンロードして使う方法
今回は、比較的扱いやすい「CDNサービスを介して利用する方法」をもとに「FontAwesome5」の使い方をご紹介します。
使い方は簡単。まずはFontAwesome5の公式サイトへジャンプして、上部の「How to Use」というメニューをクリック。
すると「Use Font Awesome’s Free CDN」の欄にコードが記述されているので、それをコピーします。
その後、FontAwesome5の機能を取り入れたいサイトのHTMLファイルまたはPHPファイルの<head>タグ内に挿入、保存して下準備は完了です。
FontAwesome5の実装方法
次に、サイト内へ実装していきます。
これもいたって簡単。「FontAwesome5」の公式サイトの「icon」欄にある好きなアイコンを選び、そこで発行されるコードを貼り付けたいファイル箇所にコピー＆ペーストするだけ。こうして種類豊富なアイコンフォントが実装できます。
なお、FontAwesome5には以下の2パターンの実装方法が存在します。
- HTMLファイルまたはPHPファイルに直接<i class>で始まるclassタグを記述する方法
- CSSファイルの擬似要素に記述して実装する方法
使う部分の違いは上記の通り。HTMLファイルやPHPファイルを使う方法では長いコードを使っているのに対し、CSSファイルを使う方法ではUnicodeという短い数字列のようなものを利用しています。
読み込み方に違いはありますが、いずれも簡単に実装できます。
アイコンが文字化けしたときに確認したい3つのポイント
アイコンの読み込み方によっては、オプションとなるCSSを追加で記述しなければ文字化けを起こしてしまうものも……。
そこで、万が一FontAwesome5を実装して文字化けを起こしてしまった時に確認したい3つの項目をご紹介します。
ポイント1. ファイルのパス設定
まず最初に確認したいのが、「ファイルのパス設定」です。そもそも読み込んでいるファイルが間違っていないか、また読み込むファイルが足りているかどうかも確認しましょう。
とくに「FontAwesome5」には、JavaScriptをベースにした動くアイコンもあります。読み込むファイルは分けられていますが、動かないアイコンがすべてCSSファイルだけで機能するとは限りません。場合によってはアニメーションが機能しないアイコンでもJavaScriptファイルが必要になる場合もあります。
そのため、もしCSSファイルだけを読み込んで動かない場合は、JavaScriptファイルも合わせて読み込むようカスタマイズし直してみましょう。
ポイント2. font-weightの太さ設定
次に確認したいのが、フォントの太さを指定する「font-weight」の設定です。これはすべてのアイコンに当てはまるわけではないようですが、モノによっては「font-weight」で太さを指定しなければ表示そのものが出来ないものもあります。使うアイコンによってはCSS欄に記述する必要があるでしょう。
ポイント3. font-family名の設定
最後に確認したいのが「font-family名」の設定です。FontAwesome5には無料版に加えて、有料プランに加入することで使えるアイコンフォントも用意されています。そしてそのPro独自で使えるアイコンはfont-family名が異なるので、使う際には注意が必要です。
また無料版の中でも、TwitterやFacebookといった既存サービスのブランドを利用したアイコンはfont-family名が異なります。SNSシェアボタンをコーディングする際は、こちらもあわせて注意しておきましょう。
おわりに
今回は「FontAwesome5」の使い方と、それらアイコンフォントを使う上での注意点についてそれぞれご紹介しました。
既存の型が備わっているフレームワークを利用してコーディングしたはいいものの、文字だけでは物足りないと感じるときに。雰囲気作りの一環として使うと、仕上がりのデザインが華やかになります。
少しでも見映えを整えたいという方は、ぜひ合わせて利用してみてください。
（執筆：黒川シュン 編集：Workship MAGAZINE編集部）
Variable Fontを用いた”滑らかに変化する文字”のコードスニペット8選
Workship MAGAZINE
【商用OK/無料】シンプル＆おしゃれ！フリーアイコン素材サイト25選
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
サイト運営が趣味なWeb制作系ライターとして活動中。最近はライター業と並行してサイト運営・時報の拡張機能の開発をやっています。
