|
|
|
|
|
本文為大家分享130個(gè)純CSS3圖標(biāo)(CSS icons),值得下載收藏的寶貴資料。
130個(gè)純CSS3圖標(biāo)(CSS icons)
使用方法
1、網(wǎng)頁代碼引用icono.min.css文件,注意文件路徑寫正確。
<link rel="stylesheet" href="icono.min.css">
2、html代碼,給一個(gè)元素添加你要顯示的圖標(biāo)的class,如
<i class="icono-home"></i>
<div class="icono-home"></div>
<span class="icono-home"></span>
顯示出來就是一個(gè)home的圖標(biāo)
icono-home圖標(biāo)
圖標(biāo)顏色默認(rèn)是黑色,不過你可以通過改變?cè)氐念伾珌砀淖儓D標(biāo)的顏色,例如
<div class="icono-home" style="color:white"></div>
或者在網(wǎng)頁CSS代碼里設(shè)置圖標(biāo)顏色,如:
div.icono-home{color:white}
顯示出來的圖標(biāo)就是白色的了。
類名匯總
icono-home
icono-mail
icono-rss
icono-hamburger
icono-plus
icono-cross
icono-check
icono-power
icono-heart
icono-infinity
icono-flag
icono-file
icono-image
icono-video
icono-music
icono-headphone
icono-document
icono-folder
icono-pin
icono-smile
icono-eye
icono-eye-close
icono-sliders
icono-share
icono-sync
icono-reset
icono-gear
icono-signIn
icono-signOut
icono-support
icono-dropper
icono-tiles
icono-list
icono-chain
icono-youtube
icono-rename
icono-search
icono-book
icono-forbidden
icono-trash
icono-keyboard
icono-mouse
icono-user
icono-crop
icono-display
icono-imac
icono-iphone
icono-macbook
icono-imacBold
icono-iphoneBold
icono-macbookBold
icono-nexus
icono-microphone
icono-asterisk
icono-terminal
icono-paperClip
icono-market
icono-clock
icono-textAlignRight
icono-textAlignCenter
icono-textAlignLeft
icono-indent
icono-outdent
icono-frown
icono-meh
icono-locationArrow
icono-plusCircle
icono-checkCircle
icono-crossCircle
icono-exclamation
icono-exclamationCircle
icono-comment
icono-commentEmpty
icono-areaChart
icono-pieChart
icono-barChart
icono-bookmark
icono-bookmarkEmpty
icono-filter
icono-volume
icono-volumeLow
icono-volumeMedium
icono-volumeHigh
icono-volumeDecrease
icono-volumeIncrease
icono-volumeMute
icono-tag
icono-calendar
icono-camera
icono-piano
icono-ruler
icono-cup
icono-creditCard
icono-facebook
icono-twitter
icono-gplus
icono-linkedIn
icono-instagram
icono-flickr
icono-delicious
icono-codepen
icono-blogger
icono-play
icono-pause
icono-stop
icono-rewind
icono-forward
icono-next
icono-previous
icono-caretRight
icono-caretLeft
icono-caretUp
icono-caretDown
icono-rightArrow
icono-leftArrow
icono-upArrow
icono-downArrow
icono-sun
icono-moon
icono-disqus
icono-cart
icono-caretRightCircle
icono-caretLeftCircle
icono-caretUpCircle
icono-caretDownCircle
icono-caretRightSquare
icono-caretLeftSquare
icono-caretUpSquare
icono-caretDownSquare
icono-dribbble
icono-sitemap
icono-spinner
icono-circle
icono-ellipsis