卡卡网

本文为大家分享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  箭头  圆角  三角形  实心圆