Step by step to create your own pure CSS single label icon library

As a part of web design, ICONS play an important role in highlighting important elements of the web, visual interaction, guidance and web decoration. Due to the small size of ICONS, it is not practical to load each icon as a single image element, which can increase Http requests and affect web page performance. Therefore, in practice, we may see the following common solutions:

To combine multiple ICONS in a single image in a certain order (i.eSprite figure), and then set the element’s CSSbackground-positionTo set the background for the element to display the icon
Convert a single icon element tobase64Format and declare the background in CSS
useSVGTo draw an icon
Use font ICONS
Use CSS to draw ICONS
.

The above methods can be very good to achieve the function, each has its own advantages and disadvantages. In some cases on mobile, I personally prefer to use CSS to implement simple small ICONS for several reasons:

Strong adaptability and customization, such as can change the color, size
Small footprint
High compatibility on mobile terminals
You can constantly familiarize yourself with CSS3 properties and apply them

Thanks to the popularity of CSS3 and its increasing support in major browsers, CSS has greater possibilities and the ability to draw more diverse and complex ICONS. Of course, there are a number of people who object to using CSS to draw web ICONS, which I won’t discuss here. If you disagree, try to have fun with it.

This article will separately show you how to draw some ICONS with CSS. Since using CSS to draw ICONS sometimes means you need to support them with more complex HTML structures, this article will focus on single-label CSS ICONS. This is similar to drawing ICONS using only img tags or applying font libraries to a single tag. Before explaining how to draw, let’s take a look at some of the single-label CSS ICONS we drew a while back.

CSS properties you need to master

Drawing ICONS is nothing more than drawing points, lines and surfaces. Then combine the dots, lines and planes to get the icon. Therefore, you should at least know how to use the following CSS properties

The box model
borderApplication of attributes (important for reference)
positionThe application of each attribute value of
transformdeformation
outline.box-shadow(Common in multi-border drawing)
CSS gradient (often used for transparent transitions in ICONS)
pseudoClasses andPseudo elementsThe application of
transition.animation(If you want to draw dynamic ICONS, this article only covers static ICONS.)

The main things to master are the above, and some special processing may also require the application of other CSS properties.

A few instructions

Since the size of the ICONS in most cases depends on the font size of the context, the size units for all the examples in this article are mostly usedem, set the size according to the current font size
There are someborderProperty does not specifyborder-color, such asborder-top: .4em solidBecause,border-colorFont colors are inherited by default
All ICONS are only shown as examples and are implemented in various ways, not best practices
CSS ICONS are not intended for heavy use in practice, but you can look at this article as a fun and exercise in using CSS properties

Drawing of basic elements

with`border`Attribute drawing element

In addition to being used as a simple drawing border, border can also be used to draw triangles, trapezoids, stars and other arbitrary polygons. The following are two triangles and trapezoids drawn. For more applications, you can refer to the article “Multi-directional Application of border attribute and Realization of Adaptive triangle”. Inside the comprehensive detailed introduction to draw various polygons with border.

<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="trapezoid"></div>Copy the code

.triangle1 {/* Acute triangle */
    width: 0;
    height: 0;
    border-top:50px solid transparent;
    border-bottom:100px solid #249ff1;
    border-left: 30px solid transparent;
    border-right: 100px solid transparent;
}
.triangle2 {/* Right triangle */
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-bottom: 80px solid #ff5b01;
    border-left: 50px solid #ff5b01;
    border-right:50px solid transparent;
    }
.trapezoid {/ * trapezoidal * /
    width:0;
    height:0;
    border-top:none;
    border-right:80px solid transparent;
    border-bottom:60px solid #13dbed;
    border-left: 80px solid #13dbed;
}Copy the code

with`border-radius`Drawing elements

Border-radius is used to draw dots, circles, ellipses, and rounded rectangles. The following two graphs are simply drawn.


<div class="circle"></div>
<div class="ellipse"><div>Copy the code

.circle..ellipse {
    width: 100px;
    height: 100px;
    background: #249ff1;
    border-radius: 50%;
}
.ellipse {
    width: 150px;
    background: #ff9e01;
}Copy the code

But the border-radius property can actually be set to a maximum of eight values, and by changing eight values you can get a lot of unexpected images, as shown here.

For more information about the characteristics and application of the border-radius attribute, please refer to “When is the Autumn Moon, how much do YOU know about CSS3 border-radius?” written by Zhang Xinxu.

with`box-shadow`Drawing elements

For box-shadow, the full declaration is box-shadow: H-shadow V-shadow blur spread color inset, the meanings of each value are: Horizontal offset, vertical offset, blur distance (feather value), shadow spread size (no or 0 shadow size is the same as the body size), shadow color and whether to use inner shadow. In practical application, 3-6 values can be received, and the corresponding values are as follows:

3 values: h-shadow V-shadow color
H-shadow V-shadow blur color
H-shadow v-shadow blur spread color
6 values: h-shadow V-shadow blur spread color inset

Also, border-shadow accepts comma-separated values consisting of more than one of these values, and with this feature we can achieve effects such as multiple borders. Below we use this property to implement a single label add icon and the icon representing the target without the aid of pseudo-elements. (For easy observation, the part of the implementation where symbols are added is replaced in red.)

<div class="plus"></div>
<div class="target"></div>Copy the code

.plus {
    width: 30px;
    height: 30px;
    margin-left: 50px;/* Since box-shadow does not take up space, we often need to add margin to correct position */
    background: # 000;
    box-shadow: 0 -30px 0 red, 
                0 30px 0 red,
                -30px 0 0 red, 
                30px 0 0 red;
}
.target {
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    margin-left: 50px;
    box-shadow: 0 0 0 10px #fff.0 0 0 20px red, 
                0 0 0 30px #fff.0 0 0 40px red;
}Copy the code

The results are as follows:

Above, the adding symbol uses multiple comma-separated values to set the four corners of the plus sign to achieve the effect, and the target icon is achieved by repeatedly setting the value of the shadow size greater than the size of the body to form multiple rings.

Since box-shadow does not occupy space, it is often necessary to set margin to correct the position of ICONS in practical applications, which is consistent with the outline attribute. The biggest difference between the two attributes is that the area formed by outline will not be rounded due to border-radius.

Use CSS gradients to draw ICONS

CSS3 gradient property is very powerful, theoretically through the gradient can draw any graph, gradient characteristics and use fully can write a long article, the following is an example

<div class="gradient"></div>Copy the code

.gradient {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: silver;
    background-image: linear-gradient(335deg, #b00 23px, transparent 23px),
                      linear-gradient(155deg, #d00 23px, transparent 23px),
                      linear-gradient(335deg, #b00 23px, transparent 23px),
                      linear-gradient(155deg, #d00 23px, transparent 23px);
    background-size: 58px 58px;
    background-position: 0px 2px.4px 35px.29px 31px.34px 6px;
}Copy the code

The above results in the following

For the use of the linear gradient attribute, see here

For more awesome examples of the gradient background drawn by the author of CSS SECRETS, click here

A profound

With this foundation in hand, we can build our own single label CSS icon library step by step. The following ICONS were mentioned earlier in this article

Now let’s take a couple of them and try to draw them.

The cup

First we split the cup. It’s easy to think of splitting the cup into the body and the handle. After splitting, it should be implemented with two rounded rectangles. For the outline of the cup (the black part in the image), we can choose to use the border, which will be filled with the actual color (if not specified in this article, the default color will follow the current font). Since it is a single label implementation, we also use a pseudo-element (the handle of the cup) to implement the icon. Hence the following pattern:

.cup {
    display: inline-block;
    width:.9em;
    height:.4em;
    border:.25em solid;
    border-bottom: 1.1 em solid;
    border-radius: 0 0 .25em .25em;
}
cup:before {
    position: absolute;
    right: -.6em;
    top: 0;
    width:.3em;
    height:.8em;
    border:.25em solid;
    border-left: none;
    border-radius: 0 .25em .25em 0;
    content: ' ';
}Copy the code

This creates a cup icon with different sizes by adjusting the border color (the default is the same color as the current font) and width.

heart

If you look closely at the heart, it should actually be approximated as two shapes that rotate and shift at certain angles.

So we can draw the two parts with two elements, by setting the background color and border-radius, then rotating and panting at an Angle. To facilitate positioning, here we draw the two parts with two pseudo-elements. For easy observation, let’s set the style as follows

.heart{
    display: inline-block;
    margin-top: 1.5 em;
    width:50px;
    height: 50px;
    background: green;
}
.heart:before..heart:after {
  position: absolute;
  width: 1em;
  height: 1.6 em;
  background: # 000;
  border-radius: 50% 50% 0 0;
  content: ' ';
  bottom: 0;
}
.heart:before {
  -webkit-transform: rotate(45deg);
  -webkit-transform-origin: 100% 100%;
  right: 0;
  background: red;
  opacity:.5;
  z-index: 5; }.:after {
  -webkit-transform: rotate(-45deg);
  -webkit-transform-origin: 0 100%;
  left: 0;
  opacity:.8;
}Copy the code

As you can see, the two elements will now be spaced apart by the width of the heart element, so that point A and point B actually overlap at one point. Therefore, if we set the width and height of.heart to 0, we get the following result:

At this point, I have drawn a heart, but if you look closely, there is a corner protruding from the left and right sides, which is caused by the insufficient rotation Angle. This can be fixed by increasing the Angle or setting a larger rounded corner (more adaptable). I’m going to rotate it 48deg. After changing the color and transparency, the result is as follows:

The camera

As for the camera, since you’ve already seen how to draw an icon representing the target with border-radius, the problem is simple. The whole camera is divided into three parts, which can be achieved by positioning. The implementation code is posted directly below.

.camera {
    display: inline-block;
    border-style: solid;
    border-width:.65em .9em;
    border-radius:.1em;
}
.camera:before {
    position: absolute;
    top: -.3em;
    left: -.3em;
    width:.4em;
    height:.4em;
    border-radius: 50%;
    border:.1em solid #FFF;
    box-shadow: 0 0 0 .08em.0 0 0 .16em #fff;
    content: ' ';
}
.camera:after {
    position: absolute;
    top: -.5em;
    left:.5em;
    width:.2em;
    border-top:.125em solid #FFF;
    content: ' ';
}Copy the code

The moon

The moon icon may seem difficult to implement at first glance, but it is quite easy to use once you have mastered the border-radius property. Here is the complete CSS style:

.moon {
    display:inline-block;
    height: 1.5 em;
    width: 1.5 em;
    box-shadow: inset -.4em 0 0;
    border-radius: 2em;
    transform: rotate(20deg);
}Copy the code

The core is to set the shadow mode to INset. By adjusting the parameters, different moon shapes can be obtained, as shown below:

conclusion

The essence of drawing ICONS in CSS is to rotate and translate the separated elements. It comes down to mastering the application of CSS properties. Generally, the steps are as follows:

Analyze the icon and break it down into small elements
Draw small elements
Positioning (translation and rotation, etc.)
Positioning at the parent element (e.g. with margin)

If you are not limited to a single label implementation, you can draw more complex ICONS. Here are a few things I learned when drawing ICONS:

Icon colors can be usedborderProperty to draw
border-colorIn most cases, this option is left unchecked and follows the font color of the current icon text by default
Icon size units can be usedem, that is, the font size is calculated relative to the current text, which should be suitable for most occasions, high adaptability, and strong reuse. (All the above examples only need to adjust the font size of the parent to enlarge or reduce the icon)

reading

CSS Magic: Rediscovering CSS Fun (Part 1)

CSS Magic: Rediscovering CSS Fun (Part 2)

CSS3 Patterns Gallery

Step by step to create your own pure CSS single label icon library

CSS properties you need to master

A few instructions

Drawing of basic elements

withborderAttribute drawing element

withborder-radiusDrawing elements

withbox-shadowDrawing elements

Use CSS gradients to draw ICONS

A profound

conclusion

reading

Related Posts

Write your own WordPress template

Do you really understand small programs?

The next break point in the mini-program? Pin small program card, application and platform deep integration

with`border`Attribute drawing element

with`border-radius`Drawing elements

with`box-shadow`Drawing elements