---
title: CSS Icons for Better Web - Part I
description: >-
  Recently, I have been busy working on several mobile applications - both web and native apps. Most
  of them were User Centric and the app was allowing them to...
url: https://expiredqueues.com/css-icons-for-better-web/
date: '2013-01-25T14:26:37.000Z'
image: https://expiredqueues.com/images/og/css-icons-for-better-web-024a5736.jpg
---

Written in January 2013. Much of what it describes has since changed or disappeared; it is kept as a record of how the web used to work, not as advice.

Tutorials posts css3

# CSS Icons for Better Web - Part I

25 January 2013 By Adrian 3 min read

Recently, I have been busy working on several mobile applications - both web and native apps. Most of them were User Centric and the 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 the 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 won't 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.

Meantime, you can check [CSS3 Document Icon](http://net.tutsplus.com/tutorials/html-css-techniques/create-a-document-icon-with-css3/), written by me for Nettuts+.

## Quick Preview

![Preview of CSS3 Arrow Icons](https://expiredqueues.com/images/opt/CSS3-Arrow-Icons-320.jpeg)

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 a bit more load to your page. By CSS - you can have as many colors as you 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**

```html

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

Your CSS

```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 rotations and apply to HTML along with the main class.

```css

.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):

```css

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

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

[Embedded content](http://jsfiddle.net/shekhardesigner/dd4vm/embedded/)

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):

[Embedded content](http://jsfiddle.net/shekhardesigner/KtVSz/embedded/)

### Similar posts

- [Create Document Icon with CSS3](https://expiredqueues.com/css3-document-icon/)
- [Awesome Free SVG Icons](https://expiredqueues.com/awesome-best-free-svg-icons/)

[Previously O Simple - Free Website PSD Template](https://expiredqueues.com/o-simple-website-psd-template/) [Next Metro UI Form using HTML5 and CSS3](https://expiredqueues.com/html5-css3-metro-ui-form/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "CSS Icons for Better Web - Part I",
  "datePublished": "2013-01-25T14:26:37.000Z",
  "dateModified": "2013-01-25T14:26:37.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/css-icons-for-better-web/",
  "image": "https://expiredqueues.com/images/2013/CSS3-Arrow-Icons.png",
  "keywords": "posts, css3, icons",
  "articleSection": "Tutorials"
}
```