Teach you step by step how to create a pure CSS icon library

The purpose of writing this article is actually to improve my icon library: iconoo, so let’s get straight to the point and star it, young ladies! (Should I join a github mutual fan group?)

Now that the topic is over, let’s get to the point.

In web development, we often use some small icons (plus, minus, cross, etc.). There are usually two methods:

Use images directly;

Use css/svg to draw icons directly in the browser.

Option 1: Since there are many icon images and the size is small, in order to reduce requests, we often use sprite technology to put the icons together in the same image. You can also imagine that it would be quite troublesome to modify and maintain a bunch of sprite images of icons! A better solution now is to use webpack to import images, and convert the small images directly into base64 and insert them into css. It is relatively simple to use images directly, which is also the more mainstream approach at present.

Option 2: Compared with option 1, it can obviously reduce the size of the resource. It only requires a few css/svg commands to draw beautiful icons, and it is not limited by the size of the image. It can be large or small and is very flexible. At first glance, the pile of code in Solution 2 may seem very difficult, but in fact many simple icons are very easy to implement.

The next step is the hands-on teaching time of Uncle Qieguo that the girls are most looking forward to.

Hand-in-hand teaching time

Using CSS to draw lines uses nothing more than two attributes: border & box-shadow. The shape can be deformed using border-radius and transform, and the position can be adjusted using attributes such as absolute positioning, transform, and margin. CSS drawing, once you have done it a few times, you will know what it is about. In the final analysis, it is still geometry. If you feel that geometry is brain-burning, then just use iconoo~~~

The basic principles have been said, let’s take a look at it, first look at the simplest plus sign:

.plus { 
    box-sizing : border-box; 
    display    : inline-block; 
    position   : relative; 
    font-size  : 20px; 
} 
 
.plus:before, .plus:after { 
    content        : ''; 
    pointer-events : none; 
    position       : absolute; 
    left           : 50%; 
    top            : 50%; 
    transform      : translate(-50%, -50%); 
    box-shadow     : inset 0 0 0 1em; 
} 
 
.plus:before { 
    width  : 1em; 
    height : 2px; 
} 
 
.plus:after { 
    height : 1em; 
    width  : 2px; 
}

The code is still very simple, first of all we use it here When it comes to the two pseudo-classes of before and after, the available tags are added. Otherwise, there is only one tag, and it is too difficult to make fun of it. As the name suggests, content is content, in which you can add various characters, even control characters such as line breaks. Pointer-events:none eliminates mouse pointer events, so that the element is penetrable. Please search for the specific details by yourself, so I won’t go into details here. The core of drawing is to draw two horizontal and vertical lines by setting the width, height and shadow of two pseudo-classes. The position is achieved by absolute positioning + reverse offset, cleverly utilizing the different percentage references of these two properties. Centered horizontally and vertically. All sizes except line width (2px) use the relative unit of em, so adjusting the value of font-size can adjust the size of the icon. To adjust the line width, just change the size of all px units at the same time.

Advanced gameplay

First, let’s take a look at this picture icon:

This graphic should have been talked about a lot online, but I was still confused when I first saw it. . . After analysis, the outermost border can obviously be made with border, and then it is very simple to use a before to make dots. The key is how to draw the two mountains? Box-shadow seems to be able to make multi-layer borders, and then add Does the rotation appear? Finally, just hide the part outside the border. The drawing process is as follows:

.icon-img { 
    display: inline-block; 
    position: relative; 
    box-sizing: border-box; 
    width: 90px; 
    height: 80px; 
    border: 5px solid; 
    border-radius: 10px; 
    color: #2ba5bb; 
    overflow: hidden; 
} 
 
.icon-img:before,.icon-img:after { 
    content: ''; 
    pointer-events: none; 
    position: absolute; 
} 
 
.icon-img:before { 
    width: 10px; 
    height: 10px; 
    top: 18px; 
    right: 20px; 
    box-shadow: inset 0 0 0 1em; 
    border-radius: 50%; 
} 
 
.icon-img:after { 
    width: 60px; 
    height: 50px; 
    left: 0; 
    bottom: -27px; 
    box-shadow: inset 0 0 0 50px,30px -20px 0 0; 
    transform: rotate(45deg); 
}

The code was temporarily put together, and it was not made into em units. Uh, why do we need to use em units?

When we use icons, the size may be different every time, but the size of the icon is related, and it is quite laborious to adjust. Of course, you can think of using zoom and scale to zoom, but the zoom line width will also change accordingly. When setting em, set font-size at the icon level, and then the icon itself and its descendants will use this font-size as a reference. Only adjusting the font-size will complete the proportional scaling of the icon.

Let’s look at another one with deformation:

You can actually guess how it is drawn at a glance. The geometric relationship seems to be relatively simple, but it is very complicated to map it to the CSS rules. Let’s take a look at the process first:

.icon-codepen { 
    display: inline-block; 
    position: relative; 
    box-sizing: border-box; 
    color: #2ba5bb; 
    width: 2px; 
    height: 10px; 
    box-shadow: inset 0 0 0 32px,0 15px,-11px 7px,11px 7px; 
} 
 
.icon-codepen:before, 
.icon-codepen:after { 
    content: ''; 
    pointer-events: none; 
    position: absolute; 
    width: 11px; 
    height: 4px; 
} 
 
.icon-codepen:before { 
    right: 2px; 
    top: 3px; 
    transform: skew(0,-35deg) scaleY(0.6); 
    box-shadow: inset 0 0 0 32px,0 13px,11px 26px,12px 39px; 
} 
 
.icon-codepen:after { 
    left: 2px; 
    top: 3px; 
    transform: skew(0,35deg) scaleY(0.6); 
    box-shadow: inset 0 0 0 32px,0 13px,-11px 26px,-12px 39px; 
}

The difficulty lies in the deformation of length and width. The simpler method for deformation is to use a transformation matrix to solve it. If you don't learn graphics well, it will be more painful. If you don't pursue a single label, you can represent each edge with a label, which will be easy to handle.

Uncle, how about I want to show off

? Think these are just gadgets? Want to show off? Okay, uncle will teach you!

Mona Lisa? What the hell? I will tell you that this can also be drawn with a single tag and pure CSS?

http://codepen.io/jaysalvat/p... Click to preview and see for yourself, The Mona Lisa, made up of thousands of box-shadows, gave me endocrine disorders just looking at it. . .

Static is not enough, let’s get some dynamic:

http://codepen.io/fbrz/pen/iqtlkClick to preview, don’t say much, take it without thanks!

More CSS stuff , please go to codepen to search for treasures! If the codepen cannot be opened, you can go to my blog to download the corresponding css file! What, no download link is provided? F12 Dafa is started!

The beginning and the end are echoed

The Chinese teacher said Okay, the article should echo the theme of sublimation from beginning to end, so one more time: The purpose of writing this article is actually to improve my icon library: iconoo, so let’s get straight to the point, star, young and young women!