BLOG

ブログ

技術者Kのデザイン道場
9.Font Awesome
その1

そもそもFont Awesomeって?

今回のお題は、

「Font Awesome」です!

聞いたことが無いという方も多いかもしれません。

Font Awesomeとは、Webサイトで使えるアイコンを表示できるようにするサービスです。

アイコンのために画像を作成したり、探したりする手間を大幅に削減してくれます。

では、そのアイコンはどのようなものなのでしょうか?実際に見てみましょう。

・チェックリストの項目1

 

・チェックリストの項目2

 

・チェックリストの項目3

前回、8.見出しのデザイン例 その2としてサブキャッチコピー付き見出しを少し変更して、チェックマークをつけてみました。

このチェックマークがFont Awesomeで使えるアイコンの一例です。

チェックマークがあると、少し完成度が上がる気がしませんか?

ちなみに、Font Awesomeは無料プランと有料プランがあり、上のチェックマークは無料プランでも表示されます。

1年ごとに99$払うことでより多くのアイコンを使える有料プランにできますが、無料プランでも十分な量の魅力的なアイコンを使えます。

どんな時に使うの?

レスポンシブデザインでは度々使うことがあります。

特にスマートフォン版では、画面幅が狭くテキストをあまり入れられません。

そんなときに、パッと見てすぐに分かるFont Awesomeのアイコンをテキスト代わりに使います。

他にも、先ほどのチェックマークのように、デザインのアクセントとして使うことも度々あります。

どうやって実装しているの?

/* HTML */
<head>
 <link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
</head>

<div class="iconbox">
  <p>・チェックリストの項目1</p>
 <p>・チェックリストの項目2</p>
 <p>・チェックリストの項目3</p>
</div>

/* CSS */
.iconbox{
  display: inline-block;
  position: relative;
  padding: 20px;
  border: 2px solid #2E2B2B;
  margin: 50px 0 30px;
  background-color: white;
  color: #2E2B2B;
  font-size: 18px;
  line-height: 1.5;
}

.iconbox::before{
  position: absolute;
  top: -24px;
  left: -2px;
  height: 24px;
  padding: 0 15px 0 30px;
  content: 'Check';
  background-color: #2E2B2B;
  color: white;
  font-size: 15px;
}

.iconbox::after{
  position: absolute;
  top: -24px;
  left: 7.5px;
  content: '\f00c';
  color: white;
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 900;
}

::afterでチェックマークを設定しています。

contentは”で囲むのを忘れないようにする、font-familyに”Font Awesome 5 Free”と書くこと、対応するfont-weightを指定するなど注意する点が多いです。

(設定を間違えると、□で表示されます。)

なお今回のように、リストの上にチェックマークを入れたい場合は、divの代わりにulを、pの代わりにliを使うとより良いと思います。

まとめ

  • Font Awesomeは、Webサイトで使えるアイコンを表示できるようにするサービスのこと。
  • 省スペースで表現する必要があるときに使われたり、デザインのアクセントとして使われたりする。

次回は、今回ご紹介したFont Awesomeのアイコンの例をいくつかご紹介します!

お問い合わせはこちらから

お問い合わせ