2022年10月6日コーディングWebサイトでは様々なアイコンを使用します。Awesomeを使うととても便利です。Awesomeは特定のHTMLを追加するだけでアイコンを表示することが出来ます。そのアイコンはCSSで色やサイズを指定することが出来ます。色違いのアイコン画像を複数用意する必要がなくなります。Awesomeの使い方を解説していきたいと思います。Awesomeを使う方法を解説します。Awesomeのファイル一式をダウンロードします。Web」のボタンをクリックしたらダウンロード出来ます。AwesomeのCSSを読み込むダウンロードした圧縮ファイルを解凍します。解凍後のフォルダに以下のフォルダがあります。webfontssvgsspritesscssmetadatalessjscssこの中の「webfonts」と「CSS」のフォルダを自分のプロジェクトフォルダにコピーします。HTMLファイルに「CSS」フォルダ内のall.min.cssファイルを読み込みます。Awesomeで使えるアイコンは以下のページで確認できます。左サイドバーの「Free」にチェックを入れると、無料で使えるアイコンだけが表示されます。使いたいアイコンをクリックするとアイコンの詳細ページに遷移します。Icon」のボタンをクリックすると、アイコンを表示するためのHTMLコードが表示されるのでコードをコピーします。コピーしたコードをHTMLファイルにペーストするとアイコンが表示されます。Awesomeのアイコンを表示することが出来ます。AwesomeのアイコンはCSSでスタイルを指定することが出来ます。アイコンを赤色にしたい場合はCSSで以下のように指定します。※クラス名は使用するアイコンによって異なります。red;}アイコンのサイズを変更したい場合はCSSで以下のように指定します。2em;}CSSを駆使することで他にも色々なことが出来るので試してみてください。Awesomeのアイコンを使いたいことがあります。Awesomeのアイコンフォントをインストールすることで簡単に使えるようになるので、その方法を解説します。Awesomeのフォントファイルをダウンロードします。」のボタンをクリックしたらダウンロード出来ます。Awesomeのフォントをインストールするダウンロードした圧縮ファイルを解凍します。解凍後のフォルダに以下のフォルダがあります。otfssvgsmetadataこの中の「otfs」フォルダ内に3つのフォントファイルがあるので全てインストールします。Awesomeのアイコン一覧から使いたいアイコンをクリックします。Awesomeのアイコン一覧アイコンの詳細ページ上部の小さいアイコンをクリックすると、フォントを表示するためのUnicodeがコピーされます。PhotoshopやIllustratorのテキストツールで、先ほどコピーしたUnicodeをペーストします。」が表示されていると思います。Solid」に変更するとアイコンが表示されます。Regular」にする必要があります。Regular」のどちらかに変更してみてください。AwesomeはWebサイトでもPhotoshopやIllustratorなどのデザインソフトでも簡単にアイコンを表示することが出来ます。Awesomeのアイコンを使っています。作業効率も格段に上がりますので、ぜひ使ってみてください。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメント*Webデザイナーに必要なのは才能?それとも経験?レンタルサーバーにWordPressをインストールするまでの流れを解説スポンサーリンクPROFILE2012年からWebサイト制作に関わり2022年に独立。現在はフリーランスのWebデザイナーとして活動しています。Webサイトのデザイン、WordPressでのサイト構築、HTMLとCSSのコーディングなどをメインでやっています。