saeedalipoor / icono

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

icono

icono is an icon pack that needs no external resources. Every tags can be an icon made with pure CSS.

Demo

How to use

To get going with icono you can:

• Download icono.min.css or
• Install it with Bower:

$ bower install icono

or

• Install it with npm:

$ npm install icono

And then load it in your page:

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

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:

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

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

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

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

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

icono's Issues

Icon sizes

I was asking me how would I resize an icon, for an small button for example. Would that be possible with a class "small" for example or without modifying the variables?
Thanks for sharing this :D

Printing issue

When printing, icons disappear (on Firefox).

Keep classes lowercase and use dashes (not underscores or camelCase)

http://codeguide.co/#css-classes

postcss version

Just to mark it. I'll try to do it and PR soon.

Should explicitly set `border-box: content-box` for :before/:after, if needed

I'm trying to use icono-chain with a Bootstrap-style CSS reset. One part of this is:

* {
    box-sizing: border-box;
}

However, it seems that icono assumes the box sizing on the :before and :after elements will be content-box (browser default). Since setting the box-sizing of every element to border-box is fairly common, content-box should explicitly be set on [class*="icono-"]:before, [class*="icono-"]:after.

about icono size

how do you change the size?

Repo missing icono-facebook LESS file

As the title says. icono-facebook is included in css, but its LESS file is missing from the repo.

Icon request: top, right, bottom and left arrows.

Browsers support

Hi, I ran a quick test in IE8 - IE10. I would like to share the result. Maybe after seeing the result, you can set minimum browsers support for this project and add it in the readme.

IE8

IE9

IE10

---

IE9 render all the icons great except for the logo and icon codepen.

Underscore in file names

Please add underscore in file names for exclude the compilation of all files.

Consider switching to `em` unit

Awesome work!

After looking at the way you handled icon sizes (which I thought was really clever, btw), I couldn’t help but wonder if you might benefit from employing the same strategy but with fractional ems instead of px. For example, you could set the base font size to say 16px and then set @1 = .0625em,@2 = .125em, etc.

The potential benefit of this is you could then have a .icono-2x class, for example, which would simply apply font-size: 32px and all of the icons would get twice as big. You would only have to add a single line of extra CSS to get sizes in 2x, 4x, etc. and the complexity of the .less code wouldn’t have to change at all, afaict.

I’ll note that I have made some icons like this before and have run into odd browser rounding issues. So this might be a concern. But I think it might be fine if you set a base font size for all icons in px and then use em for the width, height, border-width, ::after and ::before sizes, etc.

I’d be happy to take a stab at a PR if you think this is something icono could benefit from.

Icono-gear does not work on latest version of Firefox Developer Edition

The icono-gear class only shows 2 nested circles instead of gears.
It works fine in IE 11. Haven't tested on other browsers.
In Firefox Developer Edition:

In IE 11:

I also made my own version for a gear: JSFiddle. Works fine on both browsers.

Failing CI

The GitBook builds all fail. Unfortunately I can not see what the cause is.

browser support for icono

Lovely icons. Which browsers are supported?

carets (e.g. icono-caretLeft) do not work in Safari

Easily seen on http://saeedalipoor.github.io/icono/ where the carets shows as slightly skewed "x"s.

Please update SCSS files.

The SCSS code does not match the LESS code. For example, the "icono-next" class:

/* next.less */
.icono-next{
    width: 0;
    height: 0;
    border: @10 solid transparent;
    border-left: @10 solid;
    border-right: none;
    margin: @7 @14 @7 @10;
    box-shadow: @4 0;
}

/* next.scss */
.icono-next{
    width: 0;
    height: 0;
    border: $U10 solid transparent;
    border-left: $U10 solid;
    margin: $U7;
    &:before{
        position: absolute;
        left: 0;
        top: -$U10;
        width: 0;
        height: 0;
        border-width: $U10 $U3 $U10 $U3;
        border-style: solid;
    }
}

I was wondering why my icon wasn't rendering correctly - then I went into the developer console, changed styles to match the LESS rules, and it worked. Don't know why bad styles are left over in the SCSS code, but it would be great if they stayed in sync.

Perhaps there should be a build-time test script that checks if the SCSS and LESS compiled output are identical, and displays a warning if not.

update your bower.json file

please update you'r main attr in bower json to

  "main": "./build/icono.css",

because of wiredep read that instruction for more detail
the wiredep read bower.json file and inject dependency to the html, if you don't gave the right details to that, it can't does it's job properly.
thank's for you'r awesome font's

رفیق فایل باورت رو درست کن تا بشه با وایردپ درست انجکتش کنی توی اچ تی ام ال
التماس دعا

There should be a pre-build check to ensure equivalence of scss, less, stylus versions

It would be much harder to commit less, scss and stylus files out of sync with one another if the build process first compiled all three versions in memory and checked for equivalent output.

If there are differences, the build should cancel and a diff should be printed to the console.

Would help to resolve #36 in a sane manner (no one wants to validate all the differences with their eyeballs).

SCSS port?

This is very cool!
Would you be interested in a scss port of this lib.?

Website in title is 404

Hi,
Nice project, thank you !

The only problem I have is a mistake in the title : the website gives us a 404 (http://git.io/icono/). The website in the readme is perfectly working.

Thank you for this great work !

Responsive?

SASS files

Hello, thanks for a project! It's really great! Love it.
But are you going to create SASS files for it?

Icon Request: GitHub, GPG/Encryption/Key

I would love to see a GitHub icon and a GPG/Encryption/Key icon.

Gulp build should not compile both stylus and less

This could produce weird results if the stylus and less files produce different output. Whichever one is saved last during gulp watch becomes the built version.

Also, if #43 is solved, the output should be exactly the same - so we should just build and write whichever one has the fastest compiler.

Could we get play, pause, fast forward and rewind icons?

And are you open to people contributing icons?

how about add support for child ::after ::before ?

such likes
when some tags likes

<ul>
 <li>aaaa</li>
 <li>bbb</li>
 <li>cccc</li>
 <li>dddd</li>
 <li>eeeee</li>
</ul>

we hope has an easy way to add icon before every li.
so if we can use them like this:
icono-bars

<ul>
 <li><i class="icono-bars"></i>aaaa</li>
 <li ><i class="icono-bars"></i>bbb</li>
 <li><i class="icono-bars"></i>cccc</li>
 <li><i class="icono-bars"></i>dddd</li>
 <li><i class="icono-bars"></i>eeeee</li>
</ul>

but if there is easy like this:

/*icono-bars,icono-bars-child-after, icono-bars-child-before*/
icono-bars,icono-bars-child-after > *::after,icono-bars-child-before > *::before
{
.....incon style code
}

<ul class="icono-bars-child-before">
 <li>aaaa</li>
 <li >bbb</li>
 <li>cccc</li>
 <li>dddd</li>
 <li>eeeee</li>
</ul>

Icon Request: player icons (play, pause, stop, next, prev ...)

A little mistake

The icon QQ is not"straight". Don't know how to describe but have a closer look ~~

Import individual icons

I'm using SCSS in my project, and I want to be able to pull in individual icons to reduce my final payload size. Right now, the SCSS icon files rely on being pulled into icono.scss so the variables.scss, mixins.scss, and functions.scss files are in-scope. Importing one of them individually won't work.

I'd like to see an inversion of control, where each partial file pulls in everything it needs. This way a developer can pull in everything, or only what they need.

This could/should actually be implemented for all languages: Stylus, LESS, and even the vanilla CSS output (provide a minified master file, and then individual files for each icon type).

Icones

rails-assets.org

saeedalipoor/icono has no versions defined.

icono-frown mouth is misplaced

Icon Request: Bluetooth

Allow color overriding

Allow for css color overriding.

http://jsfiddle.net/agLs7chu/