當前位置：
首頁 > 知識 > Foundation 圖標參考手冊

Foundation 圖標參考手冊

知識 08-12

Foundation 圖標

Foundation 圖標參考手冊

Foundation 提供了 283 圖標，你可以使用 CSS 來渲染她們：修改大小和顏色。

圖標創建語法格式如下：

<i class="fi-name"></i>

語法中 name 部分為圖標指定的名稱。

要使用圖標，你可以將圖片的樣式文件放置在頁面頭部 <head> 部分:

<link rel="stylesheet" href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">Foundation 圖標參考手冊

Foundation 圖標參考手冊

General Icons

  • heart

  • star

  • plus

  • minus

  • x

  • check

  • upload

  • download

  • widget

  • marker

  • refresh

  • home

  • trash

  • paperclip

  • lock

  • unlock

  • calendar

  • cloud

  • magnifying-glass

  • zoom-out

  • zoom-in

  • wrench

  • rss

  • share

  • flag

  • list-thumbnails

  • list

  • thumbnails

  • annotate

  • folder

  • folder-lock

  • folder-add

  • clock

  • play-video

  • crop

  • archive

  • pencil

  • graph-trend

  • graph-bar

  • graph-horizontal

  • graph-pie

  • checkbox

  • minus-circle

  • x-circle

  • eye

  • database

  • results

  • results-demographics

  • like

  • dislike

  • upload-cloud

  • camera

  • alert

  • bookmark

  • contrast

  • mail

  • video

  • telephone

  • comment

  • comment-video

  • comment-quotes

  • comment-minus

  • comments

  • microphone

  • megaphone

  • sound

  • address-book

  • bluetooth

  • html5

  • css3

  • layout

  • web

  • foundation

Page Icons

  • page

  • page-csv

  • page-doc

  • page-pdf

  • page-export

  • page-export-csv

  • page-export-doc

  • page-export-pdf

  • page-add

  • page-remove

  • page-delete

  • page-edit

  • page-search

  • page-copy

  • page-filled

  • page-multiple

Arrow Icons

  • arrow-up

  • arrow-right

  • arrow-down

  • arrow-left

  • arrows-out

  • arrows-in

  • arrows-expand

  • arrows-compress

People Icons

  • torso

  • torso-female

  • torsos

  • torsos-female-male

  • torsos-male-female

  • torsos-all

  • torsos-all-female

  • torso-business

Device Icons

  • monitor

  • laptop

  • tablet-portrait

  • tablet-landscape

  • mobile

  • mobile-signal

  • usb

Text Editor Icons

  • bold

  • italic

  • underline

  • strike

  • text-color

  • background-color

  • superscript

  • subscript

  • align-left

  • align-center

  • align-right

  • align-justify

  • list-numbered

  • list-bullet

  • indent-more

  • indent-less

  • print

  • save

  • photo

  • filter

  • paint-bucket

  • link

  • unlink

  • quote

Media Control Icons

  • play

  • stop

  • pause

  • previous

  • rewind

  • fast-forward

  • next

  • record

  • play-circle

  • volume-none

  • volume

  • volume-strike

  • loop

  • shuffle

  • eject

  • rewind-ten

Ecommerce Icons

  • dollar

  • euro

  • pound

  • yen

  • bitcoin

  • bitcoin-circle

  • credit-card

  • shopping-cart

  • burst

  • burst-new

  • burst-sale

  • paypal

  • price-tag

  • pricetag-multiple

  • shopping-bag

  • dollar-bill

Accessibility Icons

  • wheelchair

  • braille

  • closed-caption

  • blind

  • asl

  • hearing-aid

  • guide-dog

  • universal-access

  • telephone-accessible

  • elevator

  • male

  • female

  • male-female

  • male-symbol

  • female-symbol

Social & Brand Icons

  • social-500px

  • social-adobe

  • social-amazon

  • social-android

  • social-apple

  • social-behance

  • social-bing

  • social-blogger

  • social-delicious

  • social-designer-news

  • social-deviant-art

  • social-digg

  • social-dribbble

  • social-drive

  • social-dropbox

  • social-evernote

  • social-facebook

  • social-flickr

  • social-forrst

  • social-foursquare

  • social-game-center

  • social-github

  • social-google-plus

  • social-hacker-news

  • social-hi5

  • social-instagram

  • social-joomla

  • social-lastfm

  • social-linkedin

  • social-medium

  • social-myspace

  • social-orkut

  • social-path

  • social-picasa

  • social-pinterest

  • social-rdio

  • social-reddit

  • social-skype

  • social-skillshare

  • social-smashing-mag

  • social-snapchat

  • social-spotify

  • social-squidoo

  • social-stack-overflow

  • social-steam

  • social-stumbleupon

  • social-treehouse

  • social-tumblr

  • social-twitter

  • social-vimeo

  • social-windows

  • social-xbox

  • social-yahoo

  • social-yelp

  • social-youtube

  • social-zerply

  • social-zurb

Miscellaneous Icons

  • compass

  • music

  • lightbulb

  • battery-full

  • battery-half

  • battery-empty

  • projection-screen

  • info

  • power

  • asterisk

  • at-sign

  • key

  • ticket

  • book

  • book-bookmark

  • anchor

  • puzzle

  • foot

  • paw

  • mountains

  • trees

  • sheriff-badge

  • first-aid

  • trophy

  • prohibited

  • no-dogs

  • no-smoking

  • safety-cone

  • shield

  • crown

  • target

  • target-two

  • die-one

  • die-two

  • die-three

  • die-four

  • die-five

  • die-six

  • skull

  • map

  • clipboard

  • clipboard-pencil

  • clipboard-notes

Foundation 圖標參考手冊

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！

本站內容充實豐富，博大精深，小編精選每日熱門資訊，隨時更新，點擊「搶先收到最新資訊」瀏覽吧！


請您繼續閱讀更多來自 程序員小新人學習 的精彩文章:

※Foundation 網格-大型設備
※Foundation 塊狀網格
※Foundation 網格系統
※Foundation 均衡器(Equalizer)

TAG:程序員小新人學習 |

您可能感興趣

※Windows 10 Redstone 4將把Cortana變成互動式用戶手冊
※Shopify Checkout 是什麼？Shopify Checkout 三分鐘設置手冊
※阿斯頓馬丁Lagonda Vision Concept撕下了豪華車規則手冊
※XQuery 參考手冊
※簡單粗暴TensorFlow入門手冊
※《超效率手冊》讀書分享會——Get More From Life
※SPRING Annotation元註解手冊
※XML Schema 參考手冊
※在 Linux 手冊頁中查看整個 Arch Linux Wiki
※Kaltendin高級休閑品牌手冊
※一本AppleⅠ操作手冊值八部iPhone XS Max
※一本Apple Ⅰ操作手冊值八部iPhone XS Max
※GitHub項目 | PyTorch 中文手冊
※Battle Grounds 戰地：沙漠航班的空降手冊
※snapseed 自查手冊-2/調整圖片
※Arch-Wiki-Man：一個以 Linux手冊樣式離線瀏覽 Arch Wiki 的工具
※Facebook能賣大蒜？！Facebook發布傳統B2B外貿海外營銷手冊
※XLink 參考手冊
※SpringBoot學習手冊-第一篇開篇
※《Air Jordan XXXIII 使用手冊》