無料でサイトに導入して使用できるアイコンフォントFoundation Iconsについて、使用する際に個人的にわかりやすいよう、アイコンのサンプル表示とアイコンクラス、CSSで使う際のコードを一覧にしたページです。
公式ページ：https://zurb.com/playground/foundation-icon-fonts-3
Foundation Iconsのアイコン一覧
一般的なアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-heart”] fi-heart \f159 | [fiicon icon=”fi-star”] fi-star \f1ee | [fiicon icon=”fi-plus”] fi-plus \f199 | [fiicon icon=”fi-minus”] fi-minus \f176 |
| [fiicon icon=”fi-x”] fi-x \f217 | [fiicon icon=”fi-check”] fi-check \f126 | [fiicon icon=”fi-upload”] fi-upload \f20c | [fiicon icon=”fi-download”] fi-download \f143 |
| [fiicon icon=”fi-widget”] fi-widget \f214 | [fiicon icon=”fi-marker”] fi-marker \f172 | [fiicon icon=”fi-refresh”] fi-refresh \f1a5 | [fiicon icon=”fi-home”] fi-home \f15a |
| [fiicon icon=”fi-trash”] fi-trash \f204 | [fiicon icon=”fi-paperclip”] fi-paperclip \f190 | [fiicon icon=”fi-lock”] fi-lock \f16a | [fiicon icon=”fi-unlock”] fi-unlock \f20a |
| [fiicon icon=”fi-calendar”] fi-calendar \f124 | [fiicon icon=”fi-cloud”] fi-cloud \f12d | [fiicon icon=”fi-magnifying-glass”] fi-magnifying-glass \f16c | [fiicon icon=”fi-zoom-out”] fi-zoom-out \f21a |
| [fiicon icon=”fi-zoom-in”] fi-zoom-in \f219 | [fiicon icon=”fi-wrench”] fi-wrench \f215 | [fiicon icon=”fi-rss”] fi-rss \f1aa | [fiicon icon=”fi-share”] fi-share \f1ad |
| [fiicon icon=”fi-flag”] fi-flag \f14d | [fiicon icon=”fi-list-thumbnails”] fi-list-thumbnails \f168 | [fiicon icon=”fi-list”] fi-list \f169 | [fiicon icon=”fi-thumbnails”] fi-thumbnails \f1fa |
| [fiicon icon=”fi-annotate”] fi-annotate \f107 | [fiicon icon=”fi-folder”] fi-folder \f150 | [fiicon icon=”fi-folder-lock”] fi-folder-lock \f14f | [fiicon icon=”fi-folder-add”] fi-folder-add \f14e |
| [fiicon icon=”fi-clock”] fi-clock \f12b | [fiicon icon=”fi-play-video”] fi-play-video \f197 | [fiicon icon=”fi-crop”] fi-crop \f136 | [fiicon icon=”fi-archive”] fi-archive \f108 |
| [fiicon icon=”fi-pencil”] fi-pencil \f194 | [fiicon icon=”fi-graph-trend”] fi-graph-trend \f156 | [fiicon icon=”fi-graph-bar”] fi-graph-bar \f153 | [fiicon icon=”fi-graph-horizontal”] fi-graph-horizontal \f154 |
| [fiicon icon=”fi-graph-pie”] fi-graph-pie \f155 | [fiicon icon=”fi-checkbox”] fi-checkbox \f127 | [fiicon icon=”fi-minus-circle”] fi-minus-circle \f175 | [fiicon icon=”fi-x-circle”] fi-x-circle \f216 |
| [fiicon icon=”fi-eye”] fi-eye \f147 | [fiicon icon=”fi-database”] fi-database \f139 | [fiicon icon=”fi-results”] fi-results \f1a7 | [fiicon icon=”fi-results-demographics”] fi-results-demographics \f1a6 |
| [fiicon icon=”fi-like”] fi-like \f164 | [fiicon icon=”fi-dislike”] fi-dislike \f140 | [fiicon icon=”fi-upload-cloud”] fi-upload-cloud \f20b | [fiicon icon=”fi-camera”] fi-camera \f125 |
| [fiicon icon=”fi-alert”] fi-alert \f101 | [fiicon icon=”fi-bookmark”] fi-bookmark \f11f | [fiicon icon=”fi-contrast”] fi-contrast \f134 | [fiicon icon=”fi-mail”] fi-mail \f16d |
| [fiicon icon=”fi-video”] fi-video \f20e | [fiicon icon=”fi-telephone”] fi-telephone \f1f8 | [fiicon icon=”fi-comment”] fi-comment \f131 | [fiicon icon=”fi-comment-video”] fi-comment-video \f130 |
| [fiicon icon=”fi-comment-quotes”] fi-comment-quotes \f12f | [fiicon icon=”fi-comment-minus”] fi-comment-minus \f12e | [fiicon icon=”fi-comments”] fi-comments \f132 | [fiicon icon=”fi-microphone”] fi-microphone \f174 |
| [fiicon icon=”fi-megaphone”] fi-megaphone \f173 | [fiicon icon=”fi-sound”] fi-sound \f1ed | [fiicon icon=”fi-address-book”] fi-address-book \f100 | [fiicon icon=”fi-bluetooth”] fi-bluetooth \f11b |
| [fiicon icon=”fi-html5″] fi-html5 \f15b | [fiicon icon=”fi-css3″] fi-css3 \f138 | [fiicon icon=”fi-layout”] fi-layout \f162 | [fiicon icon=”fi-web”] fi-web \f212 |
| [fiicon icon=”fi-foundation”] fi-foundation \f152 |
ページアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-page”] fi-page \f18e | [fiicon icon=”fi-page-csv”] fi-page-csv \f181 | [fiicon icon=”fi-page-doc”] fi-page-doc \f183 | [fiicon icon=”fi-page-pdf”] fi-page-pdf \f18b |
| [fiicon icon=”fi-page-export”] fi-page-export \f188 | [fiicon icon=”fi-page-export-csv”] fi-page-export-csv \f185 | [fiicon icon=”fi-page-export-doc”] fi-page-export-doc \f186 | [fiicon icon=”fi-page-export-pdf”] fi-page-export-pdf \f187 |
| [fiicon icon=”fi-page-add”] fi-page-add \f17f | [fiicon icon=”fi-page-remove”] fi-page-remove \f18c | [fiicon icon=”fi-page-delete”] fi-page-delete \f182 | [fiicon icon=”fi-page-edit”] fi-page-edit \f184 |
| [fiicon icon=”fi-page-search”] fi-page-search \f18d | [fiicon icon=”fi-page-copy”] fi-page-copy \f180 | [fiicon icon=”fi-page-filled”] fi-page-filled \f189 | [fiicon icon=”fi-page-multiple”] fi-page-multiple \f18a |
矢印アイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-arrow-up”] fi-arrow-up \f10c | [fiicon icon=”fi-arrow-right”] fi-arrow-right \f10b | [fiicon icon=”fi-arrow-down”] fi-arrow-down \f109 | [fiicon icon=”fi-arrow-left”] fi-arrow-left \f10a |
| [fiicon icon=”fi-arrows-out”] fi-arrows-out \f110 | [fiicon icon=”fi-arrows-in”] fi-arrows-in \f10f | [fiicon icon=”fi-arrows-expand”] fi-arrows-expand \f10e | [fiicon icon=”fi-arrows-compress”] fi-arrows-compress \f10d |
人のアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-torso”] fi-torso \f1fe | [fiicon icon=”fi-torso-female”] fi-torso-female \f1fd | [fiicon icon=”fi-torsos”] fi-torsos \f203 | [fiicon icon=”fi-torsos-female-male”] fi-torsos-female-male \f201 |
| [fiicon icon=”fi-torsos-male-female”] fi-torsos-male-female \f202 | [fiicon icon=”fi-torsos-all”] fi-torsos-all \f200 | [fiicon icon=”fi-torsos-all-female”] fi-torsos-all-female \f1ff | [fiicon icon=”fi-torso-business”] fi-torso-business \f1fc |
デバイスのアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-monitor”] fi-monitor \f179 | [fiicon icon=”fi-laptop”] fi-laptop \f161 | [fiicon icon=”fi-tablet-portrait”] fi-tablet-portrait \f1f4 | [fiicon icon=”fi-tablet-landscape”] fi-tablet-landscape \f1f3 |
| [fiicon icon=”fi-mobile”] fi-mobile \f178 | [fiicon icon=”fi-mobile-signal”] fi-mobile-signal \f177 | [fiicon icon=”fi-usb”] fi-usb \f20d |
テキストエディタのアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-bold”] fi-bold \f11c | [fiicon icon=”fi-italic”] fi-italic \f15f | [fiicon icon=”fi-underline”] fi-underline \f207 | [fiicon icon=”fi-strikethrough”] fi-strikethrough \f1f0 |
| [fiicon icon=”fi-text-color”] fi-text-color \f1f9 | [fiicon icon=”fi-background-color”] fi-background-color \f114 | [fiicon icon=”fi-superscript”] fi-superscript \f1f2 | [fiicon icon=”fi-subscript”] fi-subscript \f1f1 |
| [fiicon icon=”fi-align-left”] fi-align-left \f104 | [fiicon icon=”fi-align-center”] fi-align-center \f102 | [fiicon icon=”fi-align-right”] fi-align-right \f105 | [fiicon icon=”fi-align-justify”] fi-align-justify \f103 |
| [fiicon icon=”fi-list-number”] fi-list-number \f167 | [fiicon icon=”fi-list-bullet”] fi-list-bullet \f166 | [fiicon icon=”fi-indent-more”] fi-indent-more \f15d | [fiicon icon=”fi-indent-less”] fi-indent-less \f15c |
| [fiicon icon=”fi-print”] fi-print \f19f | [fiicon icon=”fi-save”] fi-save \f1ac | [fiicon icon=”fi-photo”] fi-photo \f195 | [fiicon icon=”fi-filter”] fi-filter \f14b |
| [fiicon icon=”fi-paint-bucket”] fi-paint-bucket \f18f | [fiicon icon=”fi-link”] fi-link \f165 | [fiicon icon=”fi-unlink”] fi-unlink \f209 | [fiicon icon=”fi-quote”] fi-quote \f1a3 |
メディアコントロールのアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-play”] fi-play \f198 | [fiicon icon=”fi-stop”] fi-stop \f1ef | [fiicon icon=”fi-pause”] fi-pause \f191 | [fiicon icon=”fi-previous”] fi-previous \f19c |
| [fiicon icon=”fi-rewind”] fi-rewind \f1a9 | [fiicon icon=”fi-fast-forward”] fi-fast-forward \f148 | [fiicon icon=”fi-next”] fi-next \f17c | [fiicon icon=”fi-record”] fi-record \f1a4 |
| [fiicon icon=”fi-play-circle”] fi-play-circle \f196 | [fiicon icon=”fi-volume-none”] fi-volume-none \f20f | [fiicon icon=”fi-volume”] fi-volume \f211 | [fiicon icon=”fi-volume-strike”] fi-volume-strike \f210 |
| [fiicon icon=”fi-loop”] fi-loop \f16b | [fiicon icon=”fi-shuffle”] fi-shuffle \f1b2 | [fiicon icon=”fi-eject”] fi-eject \f144 | [fiicon icon=”fi-rewind-ten”] fi-rewind-ten \f1a8 |
eコマースのアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-dollar”] fi-dollar \f142 | [fiicon icon=”fi-euro”] fi-euro \f146 | [fiicon icon=”fi-pound”] fi-pound \f19a | [fiicon icon=”fi-yen”] fi-yen \f218 |
| [fiicon icon=”fi-bitcoin”] fi-bitcoin \f119 | [fiicon icon=”fi-bitcoin-circle”] fi-bitcoin-circle \f118 | [fiicon icon=”fi-credit-card”] fi-credit-card \f135 | [fiicon icon=”fi-shopping-cart”] fi-shopping-cart \f1b1 |
| [fiicon icon=”fi-burst”] fi-burst \f123 | [fiicon icon=”fi-burst-new”] fi-burst-new \f121 | [fiicon icon=”fi-burst-sale”] fi-burst-sale \f122 | [fiicon icon=”fi-paypal”] fi-paypal \f193 |
| [fiicon icon=”fi-price-tag”] fi-price-tag \f19d | [fiicon icon=”fi-pricetag-multiple”] fi-pricetag-multiple \f19e | [fiicon icon=”fi-shopping-bag”] fi-shopping-bag \f1b0 | [fiicon icon=”fi-dollar-bill”] fi-dollar-bill \f141 |
アクセシビリティ アイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-wheelchair”] fi-wheelchair \f213 | [fiicon icon=”fi-braille”] fi-braille \f120 | [fiicon icon=”fi-closed-caption”] fi-closed-caption \f12c | [fiicon icon=”fi-blind”] fi-blind \f11a |
| [fiicon icon=”fi-asl”] fi-asl \f111 | [fiicon icon=”fi-hearing-aid”] fi-hearing-aid \f158 | [fiicon icon=”fi-guide-dog”] fi-guide-dog \f157 | [fiicon icon=”fi-universal-access”] fi-universal-access \f208 |
| [fiicon icon=”fi-telephone-accessible”] fi-telephone-accessible \f1f7 | [fiicon icon=”fi-elevator”] fi-elevator \f145 | [fiicon icon=”fi-male”] fi-male \f170 | [fiicon icon=”fi-female”] fi-female \f14a |
| [fiicon icon=”fi-male-female”] fi-male-female \f16e | [fiicon icon=”fi-male-symbol”] fi-male-symbol \f16f | [fiicon icon=”fi-female-symbol”] fi-female-symbol \f149 |
ソーシャルとブランドのアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-social-500px”] fi-social-500px \f1b4 | [fiicon icon=”fi-social-adobe”] fi-social-adobe \f1b5 | [fiicon icon=”fi-social-amazon”] fi-social-amazon \f1b6 | [fiicon icon=”fi-social-android”] fi-social-android \f1b7 |
| [fiicon icon=”fi-social-apple”] fi-social-apple \f1b8 | [fiicon icon=”fi-social-behance”] fi-social-behance \f1b9 | [fiicon icon=”fi-social-bing”] fi-social-bing \f1ba | [fiicon icon=”fi-social-blogger”] fi-social-blogger \f1bb |
| [fiicon icon=”fi-social-delicious”] fi-social-delicious \f1bc | [fiicon icon=”fi-social-designer-news”] fi-social-designer-news \f1bd | [fiicon icon=”fi-social-deviant-art”] fi-social-deviant-art \f1be | [fiicon icon=”fi-social-digg”] fi-social-digg \f1bf |
| [fiicon icon=”fi-social-dribbble”] fi-social-dribbble \f1c0 | [fiicon icon=”fi-social-drive”] fi-social-drive \f1c1 | [fiicon icon=”fi-social-dropbox”] fi-social-dropbox \f1c2 | [fiicon icon=”fi-social-evernote”] fi-social-evernote \f1c3 |
| [fiicon icon=”fi-social-facebook”] fi-social-facebook \f1c4 | [fiicon icon=”fi-social-flickr”] fi-social-flickr \f1c5 | [fiicon icon=”fi-social-forrst”] fi-social-forrst \f1c6 | [fiicon icon=”fi-social-foursquare”] fi-social-foursquare \f1c7 |
| [fiicon icon=”fi-social-game-center”] fi-social-game-center \f1c8 | [fiicon icon=”fi-social-github”] fi-social-github \f1c9 | [fiicon icon=”fi-social-google-plus”] fi-social-google-plus \f1ca | [fiicon icon=”fi-social-hacker-news”] fi-social-hacker-news \f1cb |
| [fiicon icon=”fi-social-hi5″] fi-social-hi5 \f1cc | [fiicon icon=”fi-social-instagram”] fi-social-instagram \f1cd | [fiicon icon=”fi-social-joomla”] fi-social-joomla \f1ce | [fiicon icon=”fi-social-lastfm”] fi-social-lastfm \f1cf |
| [fiicon icon=”fi-social-linkedin”] fi-social-linkedin \f1d0 | [fiicon icon=”fi-social-medium”] fi-social-medium \f1d1 | [fiicon icon=”fi-social-myspace”] fi-social-myspace \f1d2 | [fiicon icon=”fi-social-orkut”] fi-social-orkut \f1d3 |
| [fiicon icon=”fi-social-path”] fi-social-path \f1d4 | [fiicon icon=”fi-social-picasa”] fi-social-picasa \f1d5 | [fiicon icon=”fi-social-pinterest”] fi-social-pinterest \f1d6 | [fiicon icon=”fi-social-rdio”] fi-social-rdio \f1d7 |
| [fiicon icon=”fi-social-reddit”] fi-social-reddit \f1d8 | [fiicon icon=”fi-social-skype”] fi-social-skype \f1da | [fiicon icon=”fi-social-skillshare”] fi-social-skillshare \f1d9 | [fiicon icon=”fi-social-smashing-mag”] fi-social-smashing-mag \f1db |
| [fiicon icon=”fi-social-snapchat”] fi-social-snapchat \f1dc | [fiicon icon=”fi-social-spotify”] fi-social-spotify \f1dd | [fiicon icon=”fi-social-squidoo”] fi-social-squidoo \f1de | [fiicon icon=”fi-social-stack-overflow”] fi-social-stack-overflow \f1df |
| [fiicon icon=”fi-social-steam”] fi-social-steam \f1e0 | [fiicon icon=”fi-social-stumbleupon”] fi-social-stumbleupon \f1e1 | [fiicon icon=”fi-social-treehouse”] fi-social-treehouse \f1e2 | [fiicon icon=”fi-social-tumblr”] fi-social-tumblr \f1e3 |
| [fiicon icon=”fi-social-twitter”] fi-social-twitter \f1e4 | [fiicon icon=”fi-social-vimeo”] fi-social-vimeo \f1e5 | [fiicon icon=”fi-social-windows”] fi-social-windows \f1e6 | [fiicon icon=”fi-social-xbox”] fi-social-xbox \f1e7 |
| [fiicon icon=”fi-social-yahoo”] fi-social-yahoo \f1e8 | [fiicon icon=”fi-social-yelp”] fi-social-yelp \f1e9 | [fiicon icon=”fi-social-youtube”] fi-social-youtube \f1ea | [fiicon icon=”fi-social-zerply”] fi-social-zerply \f1eb |
| [fiicon icon=”fi-social-zurb”] fi-social-zurb \f1ec |
その他のアイコン
上段：カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段：CSSへスタイルコードを追加する場合
HTMLでの書き方
<i class="アイコンクラス"></i>CSSでの書き方（何かの前に追加する場合）
CSSクラス:before {
content: "CSSコード";
}| [fiicon icon=”fi-compass”] fi-compass \f133 | [fiicon icon=”fi-music”] fi-music \f17b | [fiicon icon=”fi-lightbulb”] fi-lightbulb \f163 | [fiicon icon=”fi-battery-full”] fi-battery-full \f116 |
| [fiicon icon=”fi-battery-half”] fi-battery-half \f117 | [fiicon icon=”fi-battery-empty”] fi-battery-empty \f115 | [fiicon icon=”fi-projection-screen”] fi-projection-screen \f1a1 | [fiicon icon=”fi-info”] fi-info \f15e |
| [fiicon icon=”fi-power”] fi-power \f19b | [fiicon icon=”fi-asterisk”] fi-asterisk \f112 | [fiicon icon=”fi-at-sign”] fi-at-sign \f113 | [fiicon icon=”fi-key”] fi-key \f160 |
| [fiicon icon=”fi-ticket”] fi-ticket \f1fb | [fiicon icon=”fi-book”] fi-book \f11e | [fiicon icon=”fi-book-bookmark”] fi-book-bookmark \f11d | [fiicon icon=”fi-anchor”] fi-anchor \f106 |
| [fiicon icon=”fi-puzzle”] fi-puzzle \f1a2 | [fiicon icon=”fi-foot”] fi-foot \f151 | [fiicon icon=”fi-paw”] fi-paw \f192 | [fiicon icon=”fi-mountains”] fi-mountains \f17a |
| [fiicon icon=”fi-trees”] fi-trees \f205 | [fiicon icon=”fi-sheriff-badge”] fi-sheriff-badge \f1ae | [fiicon icon=”fi-first-aid”] fi-first-aid \f14c | [fiicon icon=”fi-trophy”] fi-trophy \f206 |
| [fiicon icon=”fi-prohibited”] fi-prohibited \f1a0 | [fiicon icon=”fi-no-dogs”] fi-no-dogs \f17d | [fiicon icon=”fi-no-smoking”] fi-no-smoking \f17e | [fiicon icon=”fi-safety-cone”] fi-safety-cone \f1ab |
| [fiicon icon=”fi-shield”] fi-shield \f1af | [fiicon icon=”fi-crown”] fi-crown \f137 | [fiicon icon=”fi-target”] fi-target \f1f6 | [fiicon icon=”fi-target-two”] fi-target-two \f1f5 |
| [fiicon icon=”fi-die-one”] fi-die-one \f13c | [fiicon icon=”fi-die-two”] fi-die-two \f13f | [fiicon icon=”fi-die-three”] fi-die-three \f13e | [fiicon icon=”fi-die-four”] fi-die-four \f13b |
| [fiicon icon=”fi-die-five”] fi-die-five \f13a | [fiicon icon=”fi-die-six”] fi-die-six \f13d | [fiicon icon=”fi-skull”] fi-skull \f1b3 | [fiicon icon=”fi-map”] fi-map \f171 |
| [fiicon icon=”fi-clipboard”] fi-clipboard \f12a | [fiicon icon=”fi-clipboard-pencil”] fi-clipboard-pencil \f129 | [fiicon icon=”fi-clipboard-notes”] fi-clipboard-notes \f128 |
