CDNを使ってWebページにアイコンを挿入する方法|Font Awesome入門

アイコンは、アプリケーション内でユーザーが実行できる操作を直感的に示すための優れた手段です。現在、すぐに使えるアイコンライブラリが数多く公開されており、その代表的なものをいくつか紹介します。

代表的な無料アイコンライブラリ

Font Awesome – https://fontawesome.com/
Flaticon – https://www.flaticon.com/
Material Design Icons – https://material.io/resources/icons/

上記以外にも多数のライブラリが存在しますが、本ガイドの目的は、そのうちの1つを実際のプロジェクトで活用し、CSSでスタイルをコントロールする方法を習得することです。1つのライブラリの使い方をマスターすれば、他のライブラリでもほぼ同じ手順で応用できます。

Font AwesomeをCDNで読み込む

この記事では、Font Awesomeを使用します。下記のコードエディタで、HTMLドキュメントの<head>内にある<link>タグに注目してください。これはFont Awesomeのアイコンライブラリを参照するための、圧縮(minified)済みのCSSファイルです。「minified(最小化)」とは、不要な空白や改行がすべて削除され、整形されていない状態を指します。

このコンテンツデリバリーネットワーク(CDN)へのリンクが<head>内にさえあれば、Font Awesomeの無料ライブラリのほぼすべてのアイコンにアクセス可能になります。SVG形式のライブラリも用意されていますが、こちらについてはJavaScriptの解説記事で改めて取り上げます。

<!DOCTYPE html>
<html lang="en">
   <head>
       <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Icons</title>
       <style>
           .icon-container {
               font-size: 24px;
           }
           .fab {
               font-size: 3rem;
               color: #1DA1F1;
           }
           .fa-heart {
               font-size: 4rem;
               color: crimson;
           }
       </style>
      
   </head>
   <body>
       <!-- Icons will go here -->
       <div class="icon-container">
           <i class="fab fa-twitter"></i>
           <span class="fas fa-camera"></span>
           <span class="fas fa-heart"></span>
 
       </div>
   </body>
</html>

HTMLでのアイコンの記述方法

上記のコードの<body>内には、<i>要素と<span>要素という2種類のインライン要素が使われています。どちらの書き方もマークアップとしては有効です。<i>が最も広く使われている印象ですが、<span>が使われるケースもごくまれに見られます。

また、要素の中身が空である点にも注目してください。class属性を指定することで、<head>に挿入したCSSファイルを通じて、Font Awesomeのライブラリから必要なアイコンを呼び出しているのです。

ブートキャンプ参加者の81%が、受講後にテック業界でのキャリア展望についてより自信を持てるようになったと回答しています。まずはブートキャンプとのマッチングから始めましょう。

ブートキャンプ卒業生の平均的なキャリアチェンジ期間は、受講開始から初めての仕事の獲得まで6ヶ月未満です。

CSSファイルの中身を直接確認することも可能ですが、膨大なテキストがずらりと並んでいるため、最初は少し圧倒されるかもしれません。大切なのは、このファイルに「プロジェクトへ無料アイコンを挿入するために必要な情報がすべて詰まっている」ということを理解しておくことです。

クラス名の構成:プレフィックスとアイコン名

アイコンのクラス名は「スタイルのプレフィックス」と「アイコン名」の2つのパーツで構成されています。先ほどの例では「fab」と「fas」が登場しました。それぞれ「fa」はFont Awesome、「b」はbrand(ブランド)、「s」はsolid(ソリッド)を意味します。その他のプレフィックスも存在しますが、それらを利用するにはPROアカウントが必要です。

アイコン名は、Font Awesome公式サイトのアイコンギャラリーを閲覧すれば確認できます。命名は「fa-<アイコン名>」という規則に従うのが一般的です。

CSSでアイコンのスタイルを整える

アイコンはインライン要素として扱い、CSSでスタイルやページ上の位置をコントロールします。スタイリングの詳細については、Font Awesomeの公式ドキュメントを参照するのがおすすめです。ドキュメントは非常に読みやすく構成されているため、技術文書を読む練習としても最適です。CSSによるスタイリングの実例は、上記のエディタ内のコードにも含まれています。

ぜひサンドボックス環境でいろいろなアイコンを試しながら、オリジナルのスタイリングに挑戦してみてください!

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

CSSのdisplayプロパティ徹底解説：inline・block・inline-blockの違いと使い分け

CSSでアイコン付きフォームを作成する方法を初心者向けに解説
Webサイトの会員登録フォームやログインフォームでは、入力欄の横にアイコンを表示すると、ユーザーが「何を入力すればよいのか」を直感的に把握でき、デザインの完成度も大きく向上します。本記事では、アイコンフォントライブラリ「Font Awesome」と、CSSのFlexbox（フレックスボックス）を組み合わせて、アイコン付きの入力フォームを作成する方法を、実際に動作するサンプルコード付きで解説します。実装のポイントFont AwesomeのCSSファイルをCDN経由で読み込むアイコンと入力欄をタグでまとめ、display: flex;で横並びに配置するアイコン部分と入力欄のパディング・フォントサイ
PowerPointでテキストを曲線状に表示する方法｜WordArtの使い方を解説
PowerPointで曲線テキストを挿入したい場合、標準搭載されているWordArt機能を活用するのがおすすめです。WordArtを使えば、スライド上の任意の場所に曲線テキストを配置でき、その数にも制限はありません。フォントの種類、サイズ、色なども自由に設定できるのが大きな魅力です。WordArtは、PowerPointをはじめとするOfficeアプリに組み込まれている機能で、スタイルの異なる装飾テキストをスライドの好きな位置に追加できます。例えば、弧を描くような丸みのあるテキストを表示したり、波打つようなエフェクトをかけたりすることで、他の要素との差別化を図りたい場面があるでしょう。そんなと