Foundation 图标参考手册 · W3School Foundation 教程

# Foundation 图标参考手册 ## Foundation 图标 Foundation 提供了 283 图标，你可以使用 CSS 来渲染她们：修改大小和颜色。图标创建语法格式如下： ``` ``` 语法中 _name_ 部分为图标指定的名称。要使用图标，你可以将图片的样式文件放置在页面头部 `<head>` 部分: ``` <link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css" /> ``` 以上是菜鸟教程使用的图标样式类，大家可以共用。 [点我在新页面中查看图标。](/try/demo_source/icon_ref.htm) ## General Icons <link rel="stylesheet" href="styles/foundation-icons.css" /> <ul class="small-block-grid-2 large-block-grid-4"> <li> heart </li> <li> star </li> <li> plus </li> <li> minus </li> <li> x </li> <li> check </li> <li> upload </li> <li> download </li> <li> widget </li> <li> marker </li> <li> refresh </li> <li> home </li> <li> trash </li> <li> paperclip </li> <li> lock </li> <li> unlock </li> <li> calendar </li> <li> cloud </li> <li> magnifying-glass </li> <li> zoom-out </li> <li> zoom-in </li> <li> wrench </li> <li> rss </li> <li> share </li> <li> flag </li> <li> list-thumbnails </li> <li> list </li> <li> thumbnails </li> <li> annotate </li> <li> folder </li> <li> folder-lock </li> <li> folder-add </li> <li> clock </li> <li> play-video </li> <li> crop </li> <li> archive </li> <li> pencil </li> <li> graph-trend </li> <li> graph-bar </li> <li> graph-horizontal </li> <li> graph-pie </li> <li> checkbox </li> <li> minus-circle </li> <li> x-circle </li> <li> eye </li> <li> database </li> <li> results </li> <li> results-demographics </li> <li> like </li> <li> dislike </li> <li> upload-cloud </li> <li> camera </li> <li> alert </li> <li> bookmark </li> <li> contrast </li> <li> mail </li> <li> video </li> <li> telephone </li> <li> comment </li> <li> comment-video </li> <li> comment-quotes </li> <li> comment-minus </li> <li> comments </li> <li> microphone </li> <li> megaphone </li> <li> sound </li> <li> address-book </li> <li> bluetooth </li> <li> html5 </li> <li> css3 </li> <li> layout </li> <li> web </li> <li> foundation </li> </ul> ## Page Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> page </li> <li> page-csv </li> <li> page-doc </li> <li> page-pdf </li> <li> page-export </li> <li> page-export-csv </li> <li> page-export-doc </li> <li> page-export-pdf </li> <li> page-add </li> <li> page-remove </li> <li> page-delete </li> <li> page-edit </li> <li> page-search </li> <li> page-copy </li> <li> page-filled </li> <li> page-multiple </li> </ul> ## Arrow Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> arrow-up </li> <li> arrow-right </li> <li> arrow-down </li> <li> arrow-left </li> <li> arrows-out </li> <li> arrows-in </li> <li> arrows-expand </li> <li> arrows-compress </li> </ul> ## People Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> torso </li> <li> torso-female </li> <li> torsos </li> <li> torsos-female-male </li> <li> torsos-male-female </li> <li> torsos-all </li> <li> torsos-all-female </li> <li> torso-business </li> </ul> ## Device Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> monitor </li> <li> laptop </li> <li> tablet-portrait </li> <li> tablet-landscape </li> <li> mobile </li> <li> mobile-signal </li> <li> usb </li> </ul> ## Text Editor Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> bold </li> <li> italic </li> <li> underline </li> <li> strike </li> <li> text-color </li> <li> background-color </li> <li> superscript </li> <li> subscript </li> <li> align-left </li> <li> align-center </li> <li> align-right </li> <li> align-justify </li> <li> list-numbered </li> <li> list-bullet </li> <li> indent-more </li> <li> indent-less </li> <li> print </li> <li> save </li> <li> photo </li> <li> filter </li> <li> paint-bucket </li> <li> link </li> <li> unlink </li> <li> quote </li> </ul> ## Media Control Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> play </li> <li> stop </li> <li> pause </li> <li> previous </li> <li> rewind </li> <li> fast-forward </li> <li> next </li> <li> record </li> <li> play-circle </li> <li> volume-none </li> <li> volume </li> <li> volume-strike </li> <li> loop </li> <li> shuffle </li> <li> eject </li> <li> rewind-ten </li> </ul> ## Ecommerce Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> dollar </li> <li> euro </li> <li> pound </li> <li> yen </li> <li> bitcoin </li> <li> bitcoin-circle </li> <li> credit-card </li> <li> shopping-cart </li> <li> burst </li> <li> burst-new </li> <li> burst-sale </li> <li> paypal </li> <li> price-tag </li> <li> pricetag-multiple </li> <li> shopping-bag </li> <li> dollar-bill </li> </ul> ## Accessibility Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> wheelchair </li> <li> braille </li> <li> closed-caption </li> <li> blind </li> <li> asl </li> <li> hearing-aid </li> <li> guide-dog </li> <li> universal-access </li> <li> telephone-accessible </li> <li> elevator </li> <li> male </li> <li> female </li> <li> male-female </li> <li> male-symbol </li> <li> female-symbol </li> </ul> ## Social & Brand Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> social-500px </li> <li> social-adobe </li> <li> social-amazon </li> <li> social-android </li> <li> social-apple </li> <li> social-behance </li> <li> social-bing </li> <li> social-blogger </li> <li> social-delicious </li> <li> social-designer-news </li> <li> social-deviant-art </li> <li> social-digg </li> <li> social-dribbble </li> <li> social-drive </li> <li> social-dropbox </li> <li> social-evernote </li> <li> social-facebook </li> <li> social-flickr </li> <li> social-forrst </li> <li> social-foursquare </li> <li> social-game-center </li> <li> social-github </li> <li> social-google-plus </li> <li> social-hacker-news </li> <li> social-hi5 </li> <li> social-instagram </li> <li> social-joomla </li> <li> social-lastfm </li> <li> social-linkedin </li> <li> social-medium </li> <li> social-myspace </li> <li> social-orkut </li> <li> social-path </li> <li> social-picasa </li> <li> social-pinterest </li> <li> social-rdio </li> <li> social-reddit </li> <li> social-skype </li> <li> social-skillshare </li> <li> social-smashing-mag </li> <li> social-snapchat </li> <li> social-spotify </li> <li> social-squidoo </li> <li> social-stack-overflow </li> <li> social-steam </li> <li> social-stumbleupon </li> <li> social-treehouse </li> <li> social-tumblr </li> <li> social-twitter </li> <li> social-vimeo </li> <li> social-windows </li> <li> social-xbox </li> <li> social-yahoo </li> <li> social-yelp </li> <li> social-youtube </li> <li> social-zerply </li> <li> social-zurb </li> </ul> ## Miscellaneous Icons <ul class="small-block-grid-2 large-block-grid-4"> <li> compass </li> <li> music </li> <li> lightbulb </li> <li> battery-full </li> <li> battery-half </li> <li> battery-empty </li> <li> projection-screen </li> <li> info </li> <li> power </li> <li> asterisk </li> <li> at-sign </li> <li> key </li> <li> ticket </li> <li> book </li> <li> book-bookmark </li> <li> anchor </li> <li> puzzle </li> <li> foot </li> <li> paw </li> <li> mountains </li> <li> trees </li> <li> sheriff-badge </li> <li> first-aid </li> <li> trophy </li> <li> prohibited </li> <li> no-dogs </li> <li> no-smoking </li> <li> safety-cone </li> <li> shield </li> <li> crown </li> <li> target </li> <li> target-two </li> <li> die-one </li> <li> die-two </li> <li> die-three </li> <li> die-four </li> <li> die-five </li> <li> die-six </li> <li> skull </li> <li> map </li> <li> clipboard </li> <li> clipboard-pencil </li> <li> clipboard-notes </li> </ul>