Create No Image Icons in CSS3 Tutorial
For Web Developers it can be tiresome preparing images for websites and can be better if we can avoid them altogether. I recently found this handy css trick on creating CSS3 Icons without having to use images. Looking through the web there are loads of webfonts out there that are icons. By creating the icons and using the :after selector to add the content to your class CSS3 it'll be a breeze creating No Image Icons in CSS.
This No Image Icons in CSS3 Tutorial will teach you the basics when it comes to Icon creation in CSS. This No Image Icons in CSS3 Tutorial is perfect for creating icons for your web projects.
Resources
Preparing the FIles
Download the Webfont Kit of Entypo. Drag the Font Files into your Folder including .eot, svg, .ttf and .woff. Next in the Entypo folder double click on the stylesheet, select the @font-face style and copy paste ready for the next step.
Creating the Icon
In your stylesheet copy and paste the @font-face onto the sheet. This will make the font for the icons change to Entypo font.
@font-face {
font-family: 'entyporegular';
src: url('Entypo-webfont.eot');
src: url('Entypo-webfont.eot?#iefix') format('embedded-opentype'),
url('Entypo-webfont.woff') format('woff'),
url('Entypo-webfont.ttf') format('truetype'),
url('Entypo-webfont.svg#entyporegular') format('svg');
font-weight: normal;
font-style: normal;
}
For this CSS3 icons we'll be using a rounded corner rectangle. Below I've written out the class name of the icon, followed by self explanatory styles including the display, decoration type, followed by the font an background styling. Noticed we've made the font-family, Entypo, if you would like the icon color to not be white against the icon square, you can change the color in the Font styling. I've made this icon a solid color, but you can add in a CSS3 gradient in the background if desired.
.one {
/*General*/
display: block;
text-decoration: none;
/*Font*/
font-family: 'entyporegular';
text-align: center;
font-size:50px;
line-height:1.4;
font-weight:regular;
color: white;
/*Background*/
background-color: #4ed18f;
width:70px;
height:70px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:5px;
}
The :After Selector
Now we need to add in the :After Selector so we can add the content to our icon. Under content, place in a letter. Because we are using the typeface, Entotype, the letter will be seen as an icon. Type in the letter of the icon shape you would like to see.
.one:after {
content: "G";
}
The HTML
For the HTML just add this Link tag with the class name added to grab the css and you're done!
<a href="#" class="one" title="Icon 1"></a>
