https://saeedalipoor.github.io/icono/

One tag One icon, no font or svg, Pure CSS
https://saeedalipoor.github.io/icono/

css css3 icono iconsets purecss

Last synced: 3 months ago
JSON representation

One tag One icon, no font or svg, Pure CSS

• Host: GitHub
• URL: https://saeedalipoor.github.io/icono/
• Owner: saeedalipoor
• License: mit
• Created: 2014-09-07T09:37:41.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-10-11T17:40:30.000Z (8 months ago)
• Last Synced: 2024-03-08T00:55:06.835Z (3 months ago)
• Topics: css, css3, icono, iconsets, purecss
• Language: SCSS
• Homepage: http://git.io/icono
• Size: 1.25 MB
• Stars: 4,005
• Watchers: 122
• Forks: 310
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-design - ICONO
• awesome-fonts - icono - One tag One icon, no font or svg, Pure CSS (Iconic fonts)

README

        
# icono

[![Join the chat at https://gitter.im/saeedalipoor/icono](https://badges.gitter.im/Join%20Chat.svg)](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