Pickupニュース

Foundation Icon Fonts
Webフォント

Foundation Icon Fonts

ZURBのアイコンWebフォント
Foundation CMSを開発しているZURBのアイコンWebフォント。バージョン3現在で283アイコンが提供されています。
このページでは、Foundation Icon FontsをWebサイトで使用するための導入から基本的な使い方を紹介しています。
1 Foundation Icon Fontsの導入

スタイルシートのリンク(ファイルをダウンロードして利用する場合)

Foundation Icon Fontsはフォント一式と、フォントファミリーの設定を記述したスタイルシートを読み込んで使用します。

ダウンロード

リンク先のDownload the Fontをクリックして、ファイルをダウンロードします。

Webサイト

HTMLマークアップ

ダウンロード・解凍後のfoundation-iconsフォルダをアップロードし、<head>タグ内にfoundation-icons.cssまでのパスをリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="path/foundation-icons/foundation-icons.css">

スタイルシートのリンク(CDNを利用する場合)

Foundation Icon FontsはスタイルシートファイルはCDN配信サービスcdnjsでも配信されていますので、リンクを貼るだけでアイコンWebフォントを利用することが出来ます。

HTMLマークアップ

<head>タグ内にCDNで配信されているfoundation-icons.min.cssまでのスタイルシートパスへリンクする記述を追加します。
HTMLCopy
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">

基本的な使い方

Foundation Icon Fontsの記述方法

アイコンを表示したい箇所に以下のような記述を追加します。
Foundation Icon Fontsのアイコン
<i class=”fi-{アイコン名}”></i>

デモ

See the Pen Foundation Icon Fonts by JaSTIN (@JaSTIN) on CodePen.24295

1 2

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

記事ランキング