<img alt="" src="https://secure.leadforensics.com/150446.png " style="display:none;">

Create Icons with CSS

Vijay Raut Oct 13, 2014

UI/UX Technology

Dealing with icon images on the web is crucial as it affects performance of the application/website. It is also difficult to modify it and it also loads slowly. But with the help of CSS icons we can use the small size of icons and we can use it as text. It is very useful for Menu Icons.

With the help of CSS we can create different shapes of icons, and if working with text you can change the height, width and color as per your designs using CSS. These icons are useful in Mobile Devices.

It’s so much easier to maintain as compared to an image. Want to change the width? Just modify the pixel value; no Photoshop required here! Want to change the color? Easy!

Creating following Four icons using CSS

Icon Images

Browser Support

Browsers
Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support

Hamburger Icon

HTML

<i class="icon"></i>
<i class="icon icon_hamburger"></i>

CSS

.icon{
position: relative;
display:inline-block;
}

.icon::before,
.icon::after{
content: "";
position: absolute;
}

.icon_hamburger{
width:1.63em;
height:.345em;
background:black;
}

i{
display: block;
}

.icon_hamburger::before,
.icon_hamburger::after{
width:1.63em;
height:.345em;
background:black;
}

.icon_hamburger::before{
top:-.625em;
}

.icon_hamburger::after{
bottom:-.625em;
}

Icon

Mail Icon

<i class="icon"></i>
<i class="icon icon_mail"></i>
.icon_mail{
border-top: 1.063em solid transparent;
border-right: 1.25em solid black;
border-bottom: .5em solid black;
border-left: 1.25em solid black;
top: 0.6em;
}	

.icon_mail:before{
border-top: 1.063em solid #000;
border-right: 1.25em solid transparent;
border-left: 1.25em solid transparent;
left: -1.25em;
top: -1.2em;
}

Icon

That’s it! It’s so much easier than an image to maintain, too. Want to change the width? Just modify the pixel value; no Photoshop required! Want to change the color? Easy!

Heart Icon

<i class="icon"></i>
<i class="icon heart_icon"></i>
.heart_icon:before,
.heart_icon:after{
width: 1em;
height:1.563em;
background:#000;
top: -17px;
}

.heart_icon:before{
transform: rotate(135deg);
border-radius:0 0.5em 0.5em;
}

.heart_icon:after{
left:.375em;
transform: rotate(45deg);
border-radius:0.5em 0.5em 0;
}

Home Icon

<i class="icon"></i>
<i class="icon home_icon"></i>
.home_icon{
border-bottom: 1.063em solid #000;
border-right: 1.25em solid transparent;
border-left: 1.25em solid transparent;
left:30px;
}

.home_icon::before,
.home_icon::after{
width:.563em;
height:.625em;
background:#000;
}

.home_icon::before {
margin: .938em 0 0 -.688em;
}

.home_icon::after {
margin: .938em 0 0 .125em;
}

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.