Pure CSS3 Implementation supports custom set icons

Online has a variety of CSS3 painting icons, painting Comics Code, is a bit hanging! If you can also draw a set of CSS3 icons for your website, then save the effort of using small pictures. Although the major browsers to CSS3 support is not the same, but the trend, write more healthy.

First, we want to use simple, simple to add a class to the element can use the icon, and then we have to support customizable, such as color, size. Look at the following code:

<! DOCTYPE html>
We just add two classes to the a tag to make it an icon. The reason for adding two is because the class Css3-icon implements the basic style of the icon, while Css3-icon-search implements the specific search icon style:
/*global icon style*/.css3-icon{position:relative;display:block;/*custom the icon size*/width:100px;height:100px; Font-size:10px;background: #ccc;}. Css3-icon:before,.css3-icon:after{content: "";p osition:absolute;left:0;background:transparent;font-size:1em;}


Pseudo-elements must be used, and definitely positioned relative to the. Css3-icon. We want the size of the icons to be customizable, so in: Before and: After pseudo-elements we use relative unit em, which is to re-assign the initial value to the font-size in. Css3-icon.
Next we draw a search icon:
/*---------------------Search icon----------------------*/.css3-icon-search:after {left:55%;top:70%;    Width:40%;height:12%;background: #456; transform:rotate (45deg);-webkit-transform:rotate (45deg);-moz-transform: Rotate (45deg);-o-transform:rotate (45deg);}. Css3-icon-search:before {left:10%;top:5%;    width:50%;height:50%;    Border:.9em solid #456;    border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;}. Css3-icon-search:hover:before{border-color: #ff7;}. Css3-icon-search:hover:after{background: #ff7;}
In the before pseudo-element, draw a circle using Border-radiuis, and in the after pseudo-element, draw the handle of the magnifying glass using transform. In order to support icon scaling, the percentages are used here, with the following effects:


If you want to modify the size, just change the width,height,font-size in the Css3-icon (you need to change the size proportionally). However, there is a problem that custom colors are not supported at this time. We also need to improve the code, set the color in the. Css-icon, and the color of the specific icon takes the form of inheritance:
/*--------------------------------------Pure CSS iconsauthor:liquanfengcreated:2014/9/4version:1.0blog:http:// readit.sinaapp.com---------------------------------------*//*global icon style*/.css3-icon{position:relative; Display:block;/*custom the icon size*/width:100px;height:100px;font-size:10px;background: #ccc; Border-color: #456;}. Css3-icon:hover:before,.css3-icon:hover:after{border-color: #ff7;/*custom your hover Effect*/}.css3-icon:focus: Before,.css3-icon:focus:after{border-color: #ff7;/*custom your focus Effect*/}.css3-icon:active:before,.css3-icon: Active:after{border-color: #ff7;/*custom your active effect*/}.css3-icon:visited:before,.css3-icon:visited:after{ Border-color: #ff7;/*custom your visited effect*/}.css3-icon:before,.css3-icon:after{content: ";p osition:absolute; Left:0;background:transparent;font-size:1em;} /*global icon style end*//*---------------------Search icon----------------------*/.css3-icon-search:before {left    : 10%;top:5%;    width:50%;height:50%; Border:.9em SoliD    Border-color:inherit; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;--o-border-radius:50%;}.    css3-icon-search:after {left:55%;top:70%;    width:40%;height:0;    Border-top:.9em solid;    Border-color:inherit; Transform:rotate (45deg),-webkit-transform:rotate (45deg),-moz-transform:rotate (45deg),-o-transform:rotate (45deg );}
The above is all the code, the other icons can be implemented according to this framework, using the rotation and border features to draw the icon, and then in the global style inside the custom size and color is OK.



Pure CSS3 Implementation supports custom set icons