Foundation Icon Fontsを使ってみる

公開日: 2019年08月29日　更新日: 2019年09月14日

Foundation Icon Fontsとは何か？

Foundation Icon FontsとはZURB社が提供しているアイコンフォントで、283個のアイコンが収められています。

まずはダウンロード

まずは、Foundation Icon Fontsのサイトを開きます。

https://zurb.com/playground/foundation-icon-fonts-3

ちょうど真ん中に Download the Font とあるので、これをクリック。フォントをダウンロードすることにします。

ダウンロードできたら今度はアップロードです。ZIPアーカイブを展開してから、サーバの適切な場所に置きます。私はFoundation-Iconsというディレクトリを作り、そこへ丸ごと転送しました。

<link rel="stylesheet" href="/Foundation-Icons/foundation-icons.css">

このコードを</head>の直前あたりに書くのが良いでしょう。WordPressの場合だと、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]で編集できます。ここまでで準備完了です。

使ってみる

アイコン一覧はフォントをインストールしたディレクトリにあるpreview.htmlを見ることで得られます。が、これはファイル名順になっているので分かりにくいです。フォントをダウンロードした Foundation Icon Fonts 3 サイトを下にスクロールしていくと種類別に載っているので、こちらを見た方がいいでしょう。

さて、どうやってアイコンを表示するのかですが、

<i class="fi-[名称]"></i>

という形です。widgetの場合、

<i class="fi-widget"></i>

となります。

このコードを必要とする場所へ貼り付ければ、ひとまず目的は達成です。

色と大きさを変えてみる

<span style="font-size: 3em; color: Tomato;">
  <i class="fi-widget"></i>
</span>
 
<span style="font-size: 48px; color: Dodgerblue;">
  <i class="fi-widget"></i>
</span>
 
<span style="font-size: 3rem; color: Mediumslateblue;">
  <i class="fi-widget"></i>
</span>

モノはフォントなので、いろいろとできます。左のは3文字分の高さ(親基準)に指定。真ん中のは48×48ピクセルに指定。右のは3文字分の高さ(ルート基準)に指定。

相対的に大きさを変えてみる

<i class="fi-widget" style="font-size: 0.75em;"></i>
<i class="fi-widget" style="font-size: 0.875em;"></i>
<i class="fi-widget" style="font-size: 1.33em;"></i>
<i class="fi-widget" style="font-size: 2em;"></i>
<i class="fi-widget" style="font-size: 3em;"></i>
<i class="fi-widget" style="font-size: 5em;"></i>
<i class="fi-widget" style="font-size: 7em;"></i>
<i class="fi-widget" style="font-size: 10em;"></i>

<div style="font-size: 0.5rem;">
  <i class="fi-widget" style="font-size: 0.75em;"></i>
  <i class="fi-widget" style="font-size: 0.875em;"></i>
  <i class="fi-widget" style="font-size: 1.33em;"></i>
  <i class="fi-widget" style="font-size: 2em;"></i>
  <i class="fi-widget" style="font-size: 3em;"></i>
  <i class="fi-widget" style="font-size: 5em;"></i>
  <i class="fi-widget" style="font-size: 7em;"></i>
  <i class="fi-widget" style="font-size: 10em;"></i>
<div>

<div style="font-size: 24px;">
  <i class="fi-widget" style="font-size: 0.75em;"></i>
  <i class="fi-widget" style="font-size: 0.875em;"></i>
  <i class="fi-widget" style="font-size: 1.33em;"></i>
  <i class="fi-widget" style="font-size: 2em;"></i>
  <i class="fi-widget" style="font-size: 3em;"></i>
  <i class="fi-widget" style="font-size: 5em;"></i>
  <i class="fi-widget" style="font-size: 7em;"></i>
  <i class="fi-widget" style="font-size: 10em;"></i>
</div>

表示されているアイコンの見た目の下端は揃っています。ただ、アイコンの上下にかなりのスペースが空きますね。

まとめ

Foundation Icon Fontsには、出来合いのclassがなさそうです。まあ、自力で書けばよいのでしょうが。

[Top]

　