Tag Archives: Icons

CSS Icons for Better Web – Part I

Recently, I have been busy working on several mobile applications – both web and native apps. Most of them was User Centric and app was allowing them to set their own themes. This made my job as a CSS Developer a little trickier as I was using several icons with CSS sprites. Trying to come up with a better solution on how can I get rid of limited opportunity given by image sprites – I made a decision that CSS Icon should play the role here.

Here is why I chose to do the same:

  • Very first, it’s very best for performance as there wont be any HTTP request and
  • CSS icons are modular – we can reuse and remake/style it based on condition.

Today, I am going to share some of very basic icons – that we can create using CSS and use it right away- the way we wanted. This is a series of posts, will be posting more on coming days – more icons with CSS.

Mean time, you can check CSS3 Document Icon, written by me for Nettus+.

Quick Preview

Preview of CSS3 Arrow Icons

Above preview, if you try to produce by using image icon – you gotta use 4 different images. But if you write by CSS, NO IMAGE is required. Even if you need to change the color and you did use image, you will need another set of images with color changed in Photoshop and reusing – causing bit more load to your page. By CSS – you can have as many colors as your want – much more efficient, efficient – that’s why I called it – CSS Icons for better web.

How to  – Steps:

  1. A simple class with border on right & top – no background.
  2. Then Rotate it to different angles (45 for right, 135 for down, 225 for left and -45 for up.)

Lets Do it.

1. Any Element with Class .arrow

<i class="arrow"> </i>

Your CSS

.arrow {
    display:inline-block;
    width:7px;
    height:7px;
    line-height:7px;
    border-top:3px solid #aaa;
    border-right:3px solid #aaa;
    -ms-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

Now create three more classes with different different rotation and apply to HTML along with the main class.

.arrow-down {
    -ms-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    transform:rotate(135deg);
}
.arrow-left {
    -ms-transform:rotate(225deg);
    -moz-transform:rotate(225deg);
    -webkit-transform:rotate(225deg);
    transform:rotate(225deg);
}
.arrow-up{
    -ms-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    transform:rotate(-45deg);
}

Changing the arrow color on HOVER, (See how easy – think what we used to do with images):

.arrow:hover {
    border-color:#444;
}

You can see the final preview here (See in Result Tab):

And Here is a useful demonstration, (using :after pseudo element instead of separate HTML element to keep markup clean and more semantic) (See in Result Tab):

Magnifier Lens Vector Icon

We have a quality freebie for today – coz its time for Friday Freebie. Its a high quality Magnifier lense vector icon, designed beautifully in Adobe Illustrator.

Fact

I hardly remember when I desinged it – might be 3 yrs ago. I was searching in my archieve for a old layout file, suddenly I found this – and thought to share with all of you.

Preview

magnifier-lens-vector-icon

No more talk/salk- download ZIP for AI file.

Download

Oh, yes – do not forget to subscribe our RSS feed for more quality freebies. Like our Facebook Page.

Rating Stars PSD + PNG

Rating Stars, comes in use time to time when conducting user reviews. You might find a lot Rating Stars, so again I say I made something that mathches your theme.

Rating Stars PSD + PNG

I have created rating stars in three color, respectively Gold, Blue and Red Rating stars. Download file contains all stars in PSD file, also exported in PNG Sprite seperatedly. Makign it easy to help you find something that matches you theme.

Happy reviewing.

Download PSD + PNG