Foundationと相性ピッタリのアイコンフォントを使う

Foundation Icon Fonts 3 siteイメージ foundation

Foundationと同じく、ZURBが提供しているアイコンフォントを使って、連絡先を整えてみます。

アイコンフォントの設定

1. Foundation Icon Fonts 3のサイトを開きます。
http://zurb.com/playground/foundation-icon-fonts-3

2. 「Download the Font」をクリックし、「foundation-icons.zip」を任意の場所にダウンロードします。

3. zipファイルを解凍すると以下のファイルが展開されます。

.DS_Store
.fontcustom-data
foundation-icons.css
foundation-icons.eot
foundation-icons.svg
foundation-icons.ttf
foundation-icons.woff
preview.html
\svgs

(2016/04/02 更新 dist以下に直接アイコンフォントのファイルを置いていましたが、foundationを再起動すると消えてしまいました?!src以下に設置するように書き換えました。)

4. foundation-icons.cssを/src/assets/scssにコピーします。

Foundation Icon Fonts 3イメージ

5. /src/assets/以下に、fontディレクトリを作成し、残りのファイルをすべてfontディレクトリにコピーします。

Foundation Icon Fonts 3イメージ2

6. 4.でコピーした、foundation-icons.cssの拡張子を.scssにします。foundation-icons.scssを編集します。5.でコピーしたフォントファイルへのパスを修正します。

7. /src/assets/scss/app.scssに@importでfoundation-iconsを追記します。上書き用CSSの前がいいでしょう。

8. 準備完了です。アイコンを挿入したい場所に、以下のコードを入れます。

fi-[icon]の[icon]の個所には、以下のページを参照してアイコンの横の文字を入れます。
http://zurb.com/playground/foundation-icon-fonts-3

もしくは、5.でコピーした中にあるpreview.htmlにもアイコン名があります。

実際に使ってみる

アイコンフォントを使って、連絡先を入れてみました。

header.html

電話とメールアドレスは連絡先ということでadressタグで囲んでいます。

footer.html

footerのコピーライトは、html5の定義にしたがってsmallタグで囲みます。
アイコンフォントは・・・「〒」?
Foundation-iconには含まれませんが、日本が世界に誇るアイコンフォントですね。

完成形はご覧の通り。アイコンフォントなので、大きさはfont-sizeで変えられます。

Foundation Icon Fonts 3イメージ3

コメント