「font awesome」WEBデザインの幅が広がるアイコンフォント

更新日:

 
font awesome
font awesome

web制作やデザインに便利なwebアイコンフォント。アイコンフォントとは、フォントとして使用できるアイコン素材のことです。文字と同じようにCSSでサイズや色を変更することができるので便利。font awesomeとは、最も有名なアイコンフォントサービスの1つです。無料で使用できる種類も豊富で、様々な場面で使うことができます。今回は、そんなfont awesomeの基本の使い方を解説します。

font awesomeを使う準備

font awesomeをウェブサイトで表示させる方法は2通りあります。

1.CDNを使う

以下のURLにアクセスします。

https://fontawesome.com/start

<link rel〜 で始まるCDNのコードを、右下のクリップボードマークをクリックしてコピーします。

cdnのコピー

コピーしたCDNのコードを、アイコンフォントを使いたいウェブサイトの<head>〜</head>内に貼り付けます。CDNを使う場合は、これでアイコンフォントを使うことができます。
新しいアイコンが追加された場合は、コードのv5.7.2の数字の部分を最新バージョンの番号に書き換えないといけないので注意が必要です。

cdnコードの貼り付け

新しいアイコンが追加された場合は、コードのv5.7.2の数字の部分を最新バージョンの番号に書き換えないといけないので注意が必要です。

2.サーバーにデータをアップロードする

以下のURLにアクセスします。

https://fontawesome.com/start

「Download」をクリックし、font awesomeのzipフォルダをダウンロードします。

フォルダのダウンロード

zipフォルダをダウンロードしたら、解凍します。いくつかのファイルがありますが、使用するのは以下の2つです。

  • font-awesome.css
  • webfontsフォルダ

font awesomeのファイル

こちらの2つをサーバーにアップロードし、ウェブサイトの<head>〜</head>内でfont awesomeのスタイルシートを読み込みます。これでアイコンフォントを利用することができます。
font awesomeに新しいアイコンが追加された場合は、ファイルをダウンロードし直す必要があるので注意が必要です。

cssファイルの読み込み

font awesomeに新しいアイコンが追加された場合は、ファイルをダウンロードし直す必要があるので注意が必要です。

font awesomeの使い方

font awesomeを使う準備が整ったら、早速ウェブサイトで使用してみましょう。

1.使いたいアイコンを探す

font awesomeのアイコン一覧ページに、下記のURLからアクセスします。

https://fontawesome.com/icons?d=gallery

アイコンの中から、ウェブサイトで使いたいアイコンを選択し、クリックします。上部の検索窓にワードを入れて、使いたいアイコンを検索することもできます。

アイコンを探す

2.アイコンのコードをコピー

<i〜 のコードをクリックし、コピーします。

コードをコピー

3.HTMLファイルに貼り付け

HTMLファイルのアイコンを使いたい場所にコードを貼り付けます。これでアイコンが表示されます。

HTMLタグを貼り付け

font awesomeのオプション

font awesomeのアイコンフォントには、「i class="〜"」内にコードに少し加えるだけで、簡単に文字サイズを変えたりなどの変更をすることができます。

iタグのclass内

1.アイコンの大きさを変える

以下のコードを加えることで、簡単にアイコンの大きさを変えることができます。

  • fa-lg…1.3倍サイズ
  • fa-2x…2倍サイズ
  • fa-3x…3倍サイズ
  • fa-4x…4倍サイズ
  • fa-5x…5倍サイズ

これだけで簡単にサイズを大きくできます。上の5つ以外のサイズにしたいときは、自分でクラス名をつけてcssで変更しましょう。

2.アイコンにスペースをつける

アイコンの前後に余白をつけたいときは、「fa-fw」のコードを追加します。左右が詰まっていると感じた時にこのコードを追加すると、ちょうど良い隙間ができます。

3.アイコンを動かす

font awesomeのアイコンフォントは、コードを追加するだけで簡単にアニメーションをさせることができます。回転させたり、揺らしたり、様々な動きをさせることができます。以下のリンクからアニメーションの一覧を確認することができます。

http://l-lin.github.io/font-awesome-animation/
アイコンのアニメーション一覧
javascriptを使わないといけないような動きでも、簡単に実装することができます。

4.その他のカスタマイズ

アイコンの色を変えたり余白を調整したり、CSSファイルに直接記述することでより詳細なカスタマイズをすることもできます。

font awesomeのまとめ

ウェブサイトで簡単にアイコンが使える、「font awesome」の使い方を説明しました。アイコンを使うだけで、わかりやすくリッチなウェブデザインにすることができます。画像を使うよりも容量も軽く、cssで大きさや色も変えることができるので便利ですね。導入方法も簡単なので、ぜひ自分のウェブサイトでfont awesomeのアイコンフォントを使ってみてください。

投稿者:

-HP作成, 文書・画像・HP関連, 画像・写真
-, ,

Copyright© FreesoftConcierge , 2019 All Rights Reserved.