一套超精美的纯CSS3图标ICONO

当前位置:主页 > CSS3库 > CSS3动画 > 一套超精美的纯CSS3图标ICONO
一套超精美的纯CSS3图标ICONO
分享:

    插件介绍

    ICONO是一款使用纯CSS3制作的一套非常精美的CSS图标。ICONO可以使用所有的HTML元素来制作图标,一个元素一个图标,没有使用字体和SVG,纯CSS制作。ICONO中共有100个图标。

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-09
    阅读:
麦子学院
简要教程

icono是一套使用纯CSS3制作的CSS图标。icono可以使用所有的HTML元素来制作图标,如 <i> <div> <span> 等等。

使用方法

首先你需要将 icono.min.css 文件加入到HTML文档的头部。

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

然后可以在任意的html标签上添加所需要的图标的class。

<i class="icono-mail"></i>

<div class="icono-mail"></div>

<span class="icono-mail"></span>

<whatever class="icono-mail"></whatever>
                

你可以通过元素的样式来改变图标的颜色:

i.heart{color: red;}
                

icono图标

所有可用的图标class:
  • 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-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

更多的信息请参考:https://github.com/saeedalipoor/icono

网友评论