本文為大家分享130個純CSS3圖標(CSS icons)，值得下載收藏的寶貴資料。

130個純CSS3圖標(CSS icons)

demodownload

使用方法

1、網頁代碼引用icono.min.css文件，注意文件路徑寫正確。

<link rel="stylesheet" href="icono.min.css">

2、html代碼，給一個元素添加你要顯示的圖標的class，如

<i class="icono-home"></i>
<div class="icono-home"></div>
<span class="icono-home"></span>

顯示出來就是一個home的圖標

icono-home圖標

圖標顏色默認是黑色，不過你可以通過改變元素的顏色來改變圖標的顏色，例如

<div class="icono-home" style="color:white"></div>

或者在網頁CSS代碼里設置圖標顏色，如：

div.icono-home{color:white}

顯示出來的圖標就是白色的了。

trying >>

類名匯總

• 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

您可能對以下文章也感興趣

• CSS3畫一個半圓的方法
• css3畫實心圓和圓角的方法

標簽: css  css3  箭頭  圓角  三角形  實心圓