Awesomeのアイコンが大好きで、CDNを使ってブログでよく使っています。5で使えるアイコンの総数は、なんと1300種類以上!無料版でも十分すぎるほど豊富な種類のアイコンが揃っています。5でよく使うアイコンやブランドロゴ、活用できそうなアイコンをまとめてみました。MEMOサイズに関係するコードを赤字で示しています。コピペして使う場合は、この部分を改変してください。Awesomeでよくあるミスheader内コードのバージョンが古い余計な改行が入っているおわりにベーシックなアイコン様々な場面で使えるベーシックなアイコンをまとめました。ユーザー(一人)ユーザーアイコンです。"></i>ユーザー(複数)複数人のユーザーアイコンです。"></i>ユーザー(円形)プロフィール風のユーザーアイコンです。"></i>コメント(円形)円形のコメントアイコンです。"></i>コメント(四角)四角いコメントアイコンです。"></i>チェックマークシンプルなチェックマークのアイコンです。"></i>チェックマーク(円形)円形のチェックマークのアイコンです。"></i>チェックマーク(四角)四角いチェックマークのアイコンです。"></i>ホームホームアイコンです。"></i>サーチ検索窓に使えそうなサーチアイコンです。"></i>¥マーク¥マークのアイコンです。"></i>カレンダーカレンダーのアイコンです。"></i>通知マーク通知マークのアイコンです。"></i>アニメーション付きアイコンアニメーションを効果的に使えば、アイコンに躍動感を持たせることができます。アニメーションを使う場合は、それぞれ決まったクラス名をコードに追加します。animatedのクラス名を追加して、やじるしを縦に動かしています。animatedのクラス名を追加して、やじるしを横に動かしています。陽気に揺れる音符です。animatedのクラス名を使っています。animated"></i>ジャーン!いいね動きのあるいいねアイコンです。animatedのクラス名を使っています。animated"></i>ドキドキするハート収縮&膨張を繰り返すハートのアイコンです。animatedのクラス名を使っています。色はCSSで好みの色に指定してください。#ce5242}禁止マーク2つのアイコンを重ねて、禁止マークを表現しています。/*0.9倍の大きさに*/}MEMO禁止マークの方にはfa-rotate-90のクラス名を追加して90°回転させています。中のアイコンが大きいものは、CSSでサイズを調整しています。5で使用できる主要なブランドのアイコンをまとめました。各ブランドのカラーはSCHEMECOLORを参考にしています。fa-3x、fa-4xの部分を変えて、アイコンの大きさを調整してください。0.5px;/*左右にずらす*/}MEMO上記のコードは、サルワカさんの記事を参考にカスタマイズしてみました。背景1、背景2、インスタアイコンの3つパーツを組み合わせています。コピペして使う場合は、表示させる場所やアイコンの大きさに合わせて、赤字部分に修正を加えてみてください。Awesomeでよくあるミスをまとめました。アイコンが表示されなかったり、ズレている時はチェックしてみてください。header内コードのバージョンが古い新しいアイコンが表示されない場合、header内のコードが古いことが原因として考えられます。header内のコード赤字部分を最新バージョンに変更してみてください。rel="stylesheet">余計な改行が入っているHTML上で余計な改行が入ってしまっているため、上記のようにデザインが崩れてしまっている場合があります。5でよく使うアイコンやブランドロゴ、活用できそうなアイコンをご紹介しました。Webデザインの参考になれば幸いです。きょーみ他にも世界のボードゲームやトランプゲーム、遊び方についての記事も書いています。【2020年】たのまなAdobeを更新!変更点&申し込み〜利用開始までの流れを解説しますこの記事を書いた人kyomi編集者・デザイナー。大人向けのボードゲーム会を8年間、子ども向けのボードゲーム会を4年間主催。詳しいプロフィールは運営者情報からご覧ください。