KENスクールブログ | パソコン教室・パソコン講座なら個別指導のKENスクール

BLOGKENスクールブログ

  1. KENスクール TOP >
  2. KENスクールブログ > Web・DTPデザイン > アイコンフォントについて

Web・DTPデザイン

アイコンフォントについて

こんにちは。今回はアイコンフォントについてご案内します。
たとえばナビゲーションの「ホーム」ボタンの横に家のアイコンを入れたい時など、グラフィックソフトを使わずとも簡単にアイコンを設置できます。

Font Awesomeの利用

まずは以下のコードをコピーし、HTMLソースの<head>内にペーストします。

その後、fontawesomeのサイトにアクセスし、サイト上部の「Icons」をクリックします。
https://fontawesome.com/

 

検索窓で「HOME」と検索します。

その後、お好きなアイコンをクリックします。(グレーアウトしていないもの)
移動したページ上部に<i>タグがありますので、クリックします。

そうするとコピーが取れますので、アイコンを入れたい箇所のHTMLソースに以下のようにペーストします。

ブラウザでプレビューした結果は以下になります。

いかがでしたでしょうか?

これであれば手早くアイコンを使用できますので、是非活用してくださいね。

 

この記事に関連する講座

デバイスサイズに応じてページのレイアウト・デザインを最適化

詳しくはこちら