This link has been bookmarked by 27 people . It was first bookmarked on 06 Sep 2006, by Edgar Muñoz.
-
Lindsay DonagheA set of free small icons with transparent backgrounds so the color of the icons can be designated by CSS. They also come with 3 border styles, block, rounded courners and nearly circular. I think they could be used as sprites as well.
-
-
Sanscons
UPDATE: Sanscons now comes in four more sizes with the release of Sanscons+.
Introduction
Sanscons is a small spinoff of the Bitcons icon set that allows for CSS-based coloring and framing. The icon design is exactly the same, the only thing missing is a background - allowing you to set it to any color you so desire. The inspriation behind making a CSS-centric icon set came from Chameleon made by Dan Cederholm.
Example
Click on the colors below to change the color of all the icons:
* orange
* yellow
* green
* blue
* purple
* pink
Click on the shapes below to change the shape of all the icons:
* icon
* icon
* icon
Download
icon Download Sanscons
Promote Sanscons (please)
Post to del.icio.us
How It Works
As you probably know, this technique isn’t new at all. There was a very good article about two and a half years ago on this very method. Nonetheless, I have yet to see icons like these propagate on websites. The premise is very simple — use transparent gif icons and take advantage of CSS to style them in whatever way you choose.
You start with your average img tag with a "icon" class assigned to it.
Within the CSS, we set the background color and the framing background image (i.e. rounded corners). I keep the framing separate because I feel it adds a level of flexibility to the icon. Rounded corners may be perfect for some designs, but not others. My goal was to try to set the icon in the most generic state and the use CSS to fill in the blanks.
.icon {
background-color:#f00;
background-image: url(/i/rounded_bg.gif);
background-repeat: no-repeat;
}
-
-
Takahiko Nishimuraアイコン
-
Nicolas HoizeySanscons is a small spinoff of the Bitcons icon set that allows for CSS-based coloring and framing. The icon design is exactly the same, the only thing missing is a background - allowing you to set it to any color you so desire
-
Eleanor Holmeswhite on red, small cms-y
Page Comments
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.