Web Dev

Neat Social Media Icons in Pure CSS

2012-05-03

Icons in Pure CSS uses progressive enhancement to turn an unordered list of text links into a set of icons without the use of images or JavaScript.

Neat Social Media Icons in Pure CSS

This experiment starts with a simple list of links, with each link using meaningful text, and then progressively styles each link to take on the appearance of the relevant social media icon. As a result, there should be support for screenreaders or users with CSS disabled.

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.
Icons are build with CSS 2.1 and CSS3 that is not supported by Internet Explorer 6 and 7, therefore, you shouldn’t expect it to work in those browsers. CSS is not necessarily the most appropriate tool for this kind of thing either.

by Nicolas Gallagher
View Neat Social Media Icons

Peculiar CSS icon package

They were created for sites and web applications that depend on fewer HTTP requests as possible or don't need to use any image at all. The package contains 45 pictograms that are available in 16x16 pixels size.

Endless possibilities are coming with these type of icons. Sizes are not limited to 16x16 pixels, but they go up to 1024x1024 pixels and from there to ∞. They are semantically coded, each shape can be customized to different color. Web designers can now use these icons to create layouts skipping the Photoshop in the process and web developers can speed up their web applications tremendously.

Peculiar is the only icon set which Retina-ready by default, meaning that the same code is used for both regular and Retina displays. If you want to develop web apps for iPhone 4/4S and other iOS devices, this icon set will be your friend.

Browsers supported: Internet Explorer 9, Mozilla Firefox (videocast), Camino, Opera, Apple Safari, Google Chrome or any other Gecko or WebKit powered browser.
Browsers unsupported: Internet Explorer 6-8, but support can be added using CSS3 PIE.

by Lucian Marin
Get Peculiar CSS icon package

Pure CSS GUI icons

The HTML is very simple and it relies on CSS pseudo-elements rather than extraneous HTML elements. The technical aspects of this exercise might be of interest to designers.