Awesome5のアイコンの使い方をご紹介します。Awesomeとはアイコンを画像ではなく文字として扱うことができるとっても便利なツールです。アイコンを画像で用意する場合は様々なサイズでデータを用意しなければなりません。Awesomeの大きさやカラーはCSSで指定することもできるため、状況に応じて容易に変更することができます。アイコンの種類も豊富な上にテイストも同じなので、アイコンを多用しても統一感を損なうことがありません。AwesomeのCDNを<head>タグ内に記載し、webフォントとして使える状態にします。公式サイトからフォントファイルをダウンロードして使うこともできますが、CDNサーバーからファイルを読み込む方法が良いでしょう。Awesomeの公式サイトの上部のiconをクリックし、icon一覧ページに行きます。2-2.使用するアイコンを検索icon一覧ページに移動したら、使いたいアイコンを選びます。license(有料)ではない方はチェックを入れておくと良いでしょう。上部の検索窓から文字を打って検索することもできますが、日本語での検索には対応していないので英語で検索するか、一覧で流し見しながら探しましょう。2-3.HTMLタグのコピーアイコンを選び個別のページに移動します。ページ上部に表示されているHTMLタグをクリックするとコピーすることができます。先ほどコピーしたHTMLタグを任意の箇所に貼り付けます。すると下の様に貼り付けたコードがアイコンに変わっているのがわかるかと思います。CodePen.大きさや色変更はCSSで行います。見た目はアイコンですが扱いは文字ですので、大きさはfont-sizeで指定することができます。CodePen.応用FontAwesomeのオプションを使用すると、様々な表現が可能になりますので、いくつかご紹介したいと思います。サイズ変更classに「fa-◯x(◯は2~10の数字)」「fa-xs」「fa-sm」「fa-lg」と記載するとサイズ変更することができます。「fa-◯x」は◯emの処理がされます。(親要素のフォントサイズに依存します)「fa-xs」は.75em。「fa-sm」は.875em。「fa-lg」は1.33emとなります。CodePen.アイコンの幅を揃えるアイコンの大きさを同じ数値に揃えてもそれぞれ元々の幅は違うので、下の画像の左側の様に左右の余白に差が出てしまい文字の始まりが揃いません。そんな時にはclassに「fa-fw」と記載してあげるとアイコンの幅を揃えてあげることができます。リストで使用する場合まず<ul>に「fa-ul」というclass名をつけます。次に子要素の<li>の中にfontawesomeのタグを置きその中のclassに「fa-li」とつけてあげます。高さが揃わない場合はline-heightで調節することができます。コメントをキャンセルメールアドレスが公開されることはありません。Awesome5をCSSの疑似要素で指定する方法【表...ヒロキWebデザイナーしています。