Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/saeedalipoor/icono
One tag One icon, no font or svg, Pure CSS
https://github.com/saeedalipoor/icono
css css3 icono iconsets purecss
Last synced: 2 days ago
JSON representation
One tag One icon, no font or svg, Pure CSS
- Host: GitHub
- URL: https://github.com/saeedalipoor/icono
- Owner: saeedalipoor
- License: mit
- Created: 2014-09-07T09:37:41.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-10-11T17:40:30.000Z (over 1 year ago)
- Last Synced: 2024-10-29T15:35:20.964Z (2 months ago)
- Topics: css, css3, icono, iconsets, purecss
- Language: SCSS
- Homepage: http://git.io/icono
- Size: 1.25 MB
- Stars: 4,001
- Watchers: 120
- Forks: 301
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - icono
- awesome-icons - icono - Pure CSS, class based icon pack. ([Website](https://saeedalipoor.github.io/icono)) (Other / CSS only)
- Awesome-CSS-Resources - icono:
- jimsghstars - saeedalipoor/icono - One tag One icon, no font or svg, Pure CSS (SCSS)
README
# icono
[](https://gitter.im/saeedalipoor/icono?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
**icono** is an icon pack that needs no external resources. Every tags can be an icon made with **pure CSS**.
[Demo][2]
## How to use
To get going with icono you can:
* Download [icono.min.css][1]
or
* Install it with [Bower](http://bower.io):
```
$ bower install icono
```
or
* Install it with [npm](https://www.npmjs.com):
```
$ npm install icono
```
And then load it in your page:
```
```
or
You can add icono folder in your project and import icono.less for compile. iconos maincolor can be changed in **variable.less**.
and then
just add iconos classes to any type of elements that support psuedo-element.
#### Example:
``
`
`
``
``
Also you can change color of icons as simple as set color for an element.
#### Example:
`i.heart{color: red;}`
## Available classes
* `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`
## Development & Contributing
Using npm install the dependencies:
$ npm install
Run Gulp
$ gulp
[1]:http://saeedalipoor.github.io/icono/icono.min.css
[2]:http://saeedalipoor.github.io/icono