無料でサイトに導入して使用できるアイコンフォントFoundation Iconsについて、使用する際に個人的にわかりやすいよう、アイコンのサンプル表示とアイコンクラス、CSSで使う際のコードを一覧にしたページです。

公式ページ:https://zurb.com/playground/foundation-icon-fonts-3

Foundation Iconsのアイコン一覧

一般的なアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-heart
\f159

fi-star
\f1ee

fi-plus
\f199

fi-minus
\f176

fi-x
\f217

fi-check
\f126

fi-upload
\f20c

fi-download
\f143

fi-widget
\f214

fi-marker
\f172

fi-refresh
\f1a5

fi-home
\f15a

fi-trash
\f204

fi-paperclip
\f190

fi-lock
\f16a

fi-unlock
\f20a

fi-calendar
\f124

fi-cloud
\f12d

fi-magnifying-glass
\f16c

fi-zoom-out
\f21a

fi-zoom-in
\f219

fi-wrench
\f215

fi-rss
\f1aa

fi-share
\f1ad

fi-flag
\f14d

fi-list-thumbnails
\f168

fi-list
\f169

fi-thumbnails
\f1fa

fi-annotate
\f107

fi-folder
\f150

fi-folder-lock
\f14f

fi-folder-add
\f14e

fi-clock
\f12b

fi-play-video
\f197

fi-crop
\f136

fi-archive
\f108

fi-pencil
\f194

fi-graph-trend
\f156

fi-graph-bar
\f153

fi-graph-horizontal
\f154

fi-graph-pie
\f155

fi-checkbox
\f127

fi-minus-circle
\f175

fi-x-circle
\f216

fi-eye
\f147

fi-database
\f139

fi-results
\f1a7

fi-results-demographics
\f1a6

fi-like
\f164

fi-dislike
\f140

fi-upload-cloud
\f20b

fi-camera
\f125

fi-alert
\f101

fi-bookmark
\f11f

fi-contrast
\f134

fi-mail
\f16d

fi-video
\f20e

fi-telephone
\f1f8

fi-comment
\f131

fi-comment-video
\f130

fi-comment-quotes
\f12f

fi-comment-minus
\f12e

fi-comments
\f132

fi-microphone
\f174

fi-megaphone
\f173

fi-sound
\f1ed

fi-address-book
\f100

fi-bluetooth
\f11b

fi-html5
\f15b

fi-css3
\f138

fi-layout
\f162

fi-web
\f212

fi-foundation
\f152

ページアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-page
\f18e

fi-page-csv
\f181

fi-page-doc
\f183

fi-page-pdf
\f18b

fi-page-export
\f188

fi-page-export-csv
\f185

fi-page-export-doc
\f186

fi-page-export-pdf
\f187

fi-page-add
\f17f

fi-page-remove
\f18c

fi-page-delete
\f182

fi-page-edit
\f184

fi-page-search
\f18d

fi-page-copy
\f180

fi-page-filled
\f189

fi-page-multiple
\f18a

矢印アイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-arrow-up
\f10c

fi-arrow-right
\f10b

fi-arrow-down
\f109

fi-arrow-left
\f10a

fi-arrows-out
\f110

fi-arrows-in
\f10f

fi-arrows-expand
\f10e

fi-arrows-compress
\f10d

人のアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-torso
\f1fe

fi-torso-female
\f1fd

fi-torsos
\f203

fi-torsos-female-male
\f201

fi-torsos-male-female
\f202

fi-torsos-all
\f200

fi-torsos-all-female
\f1ff

fi-torso-business
\f1fc

デバイスのアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-monitor
\f179

fi-laptop
\f161

fi-tablet-portrait
\f1f4

fi-tablet-landscape
\f1f3

fi-mobile
\f178

fi-mobile-signal
\f177

fi-usb
\f20d

テキストエディタのアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-bold
\f11c

fi-italic
\f15f

fi-underline
\f207

fi-strikethrough
\f1f0

fi-text-color
\f1f9

fi-background-color
\f114

fi-superscript
\f1f2

fi-subscript
\f1f1

fi-align-left
\f104

fi-align-center
\f102

fi-align-right
\f105

fi-align-justify
\f103

fi-list-number
\f167

fi-list-bullet
\f166

fi-indent-more
\f15d

fi-indent-less
\f15c

fi-print
\f19f

fi-save
\f1ac

fi-photo
\f195

fi-filter
\f14b

fi-paint-bucket
\f18f

fi-link
\f165

fi-unlink
\f209

fi-quote
\f1a3

メディアコントロールのアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-play
\f198

fi-stop
\f1ef

fi-pause
\f191

fi-previous
\f19c

fi-rewind
\f1a9

fi-fast-forward
\f148

fi-next
\f17c

fi-record
\f1a4

fi-play-circle
\f196

fi-volume-none
\f20f

fi-volume
\f211

fi-volume-strike
\f210

fi-loop
\f16b

fi-shuffle
\f1b2

fi-eject
\f144

fi-rewind-ten
\f1a8

eコマースのアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-dollar
\f142

fi-euro
\f146

fi-pound
\f19a

fi-yen
\f218

fi-bitcoin
\f119

fi-bitcoin-circle
\f118

fi-credit-card
\f135

fi-shopping-cart
\f1b1

fi-burst
\f123

fi-burst-new
\f121

fi-burst-sale
\f122

fi-paypal
\f193

fi-price-tag
\f19d

fi-pricetag-multiple
\f19e

fi-shopping-bag
\f1b0

fi-dollar-bill
\f141

アクセシビリティ アイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-wheelchair
\f213

fi-braille
\f120

fi-closed-caption
\f12c

fi-blind
\f11a

fi-asl
\f111

fi-hearing-aid
\f158

fi-guide-dog
\f157

fi-universal-access
\f208

fi-telephone-accessible
\f1f7

fi-elevator
\f145

fi-male
\f170

fi-female
\f14a

fi-male-female
\f16e

fi-male-symbol
\f16f

fi-female-symbol
\f149

ソーシャルとブランドのアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-social-500px
\f1b4

fi-social-adobe
\f1b5

fi-social-amazon
\f1b6

fi-social-android
\f1b7

fi-social-apple
\f1b8

fi-social-behance
\f1b9

fi-social-bing
\f1ba

fi-social-blogger
\f1bb

fi-social-delicious
\f1bc

fi-social-designer-news
\f1bd

fi-social-deviant-art
\f1be

fi-social-digg
\f1bf

fi-social-dribbble
\f1c0

fi-social-drive
\f1c1

fi-social-dropbox
\f1c2

fi-social-evernote
\f1c3

fi-social-facebook
\f1c4

fi-social-flickr
\f1c5

fi-social-forrst
\f1c6

fi-social-foursquare
\f1c7

fi-social-game-center
\f1c8

fi-social-github
\f1c9

fi-social-google-plus
\f1ca

fi-social-hacker-news
\f1cb

fi-social-hi5
\f1cc

fi-social-instagram
\f1cd

fi-social-joomla
\f1ce

fi-social-lastfm
\f1cf

fi-social-linkedin
\f1d0

fi-social-medium
\f1d1

fi-social-myspace
\f1d2

fi-social-orkut
\f1d3

fi-social-path
\f1d4

fi-social-picasa
\f1d5

fi-social-pinterest
\f1d6

fi-social-rdio
\f1d7

fi-social-reddit
\f1d8

fi-social-skype
\f1da

fi-social-skillshare
\f1d9

fi-social-smashing-mag
\f1db

fi-social-snapchat
\f1dc

fi-social-spotify
\f1dd

fi-social-squidoo
\f1de

fi-social-stack-overflow
\f1df

fi-social-steam
\f1e0

fi-social-stumbleupon
\f1e1

fi-social-treehouse
\f1e2

fi-social-tumblr
\f1e3

fi-social-twitter
\f1e4

fi-social-vimeo
\f1e5

fi-social-windows
\f1e6

fi-social-xbox
\f1e7

fi-social-yahoo
\f1e8

fi-social-yelp
\f1e9

fi-social-youtube
\f1ea

fi-social-zerply
\f1eb

fi-social-zurb
\f1ec

その他のアイコン

上段:カスタムHTMLブロックへアイコンクラスとして挿入する場合 下段:CSSへスタイルコードを追加する場合

HTMLでの書き方
<i class="アイコンクラス"></i>
CSSでの書き方(何かの前に追加する場合)
CSSクラス:before {
    content: "CSSコード";
}

fi-compass
\f133

fi-music
\f17b

fi-lightbulb
\f163

fi-battery-full
\f116

fi-battery-half
\f117

fi-battery-empty
\f115

fi-projection-screen
\f1a1

fi-info
\f15e

fi-power
\f19b

fi-asterisk
\f112

fi-at-sign
\f113

fi-key
\f160

fi-ticket
\f1fb

fi-book
\f11e

fi-book-bookmark
\f11d

fi-anchor
\f106

fi-puzzle
\f1a2

fi-foot
\f151

fi-paw
\f192

fi-mountains
\f17a

fi-trees
\f205

fi-sheriff-badge
\f1ae

fi-first-aid
\f14c

fi-trophy
\f206

fi-prohibited
\f1a0

fi-no-dogs
\f17d

fi-no-smoking
\f17e

fi-safety-cone
\f1ab

fi-shield
\f1af

fi-crown
\f137

fi-target
\f1f6

fi-target-two
\f1f5

fi-die-one
\f13c

fi-die-two
\f13f

fi-die-three
\f13e

fi-die-four
\f13b

fi-die-five
\f13a

fi-die-six
\f13d

fi-skull
\f1b3

fi-map
\f171

fi-clipboard
\f12a

fi-clipboard-pencil
\f129

fi-clipboard-notes
\f128