Ajax Loader
×

CSS3 Monochrome Icon Set

A set of 85+ icons / glyphs created purely in CSS3 that you can use in your projects freely.

These are inspired by Glyphicons and Glyphish.

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

9 Comments

× New

Sign In to comment

son0fhobs:

The other thought is, might there be any chance you would consider implementing css sandpaper and selectivizr to help make it IE8 & IE7 compatible? I feel like until there's full compatibility, it remains more of a lab than a practical piece of code to implement. I love this stuff, I just don't have time at the moment to run with it, build generators to demonstrate it's flexibility, and combine everything on the web. But thanks for your tons of work!

son0fhobs:

Super awesome!

What would be the best way to contribute?

Have you considered adding any of these?:
one-div.com
d2o0t5hpnwv4c1.cloudfront.net/1050_icon/demo.html
lucianmarin.com/peculiar/

Would it be worth adding html entities as an alternative, and or use in combination with, ex. via background content?
Most notably a heart, but others would be mighty helpful for creating the more complex icons.

khela:

div.icon div.circle-plus {
position: absolute;
width: 24px;
height: 24px;
border: 4px solid #333;
border-radius: 50px;
}
div.icon div.circle-plus:after {
content: '';
position: absolute;
width: 4px;
height: 20px;
background: #333;
left: 10px;
top: 2px;
}
div.icon div.circle-plus:before {
content: '';
position: absolute;
width: 20px;
height: 4px;
background: #333;
left: 2px;
top: 10px;
}

eighttrackmind:

Very cool concept, and a good alternative to SVG icons and icon fonts. However, there are still some issues before this idea can be production-ready:

Some icons (eg. home and arrows) are a bit off on iPad
CSS transforms don't work in IE8-, a possible (non-performant) solution is CSS filters, or alternatively using borders to create 45 degree slants, like you're doing for the arrow and house icons
Before/after pseudo selectors don't work in IE7-, consider using actual element instead
Display: inline-block doesn't work in IE7-, the fix is to replace div's with span's

Artem Gordinsky:

Hi,
Is there a way to manipulate the size of an icon?

Thanks!

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+