Detailed explanation of iconfont font icons and various css small icons-CSS Tutorial-php.cn

Foreword: This is the author’s own understanding and organization after studying. If there are any errors or questions, please correct me and I will continue to update!

1. iconfont font icon

In our needs, we often see some small graphics, or icons, such as on the Tmall website:

Detailed explanation of iconfont font icons and various css small icons

We can replace these small graphics with pictures. Usually we cut these graphics into sprite charts (also called sprite charts);

The principle of sprite charts: Collect many small pictures into one large picture, and then display the picture by setting the position of the background image;

Advantages of sprites: reduce the number of server requests and reduce server pressure;

sprites are a A very good sprite making tool;

Of course there are other ways to make these small graphics, such as the font icon iconfont used by Tmall in the picture above;

Font icon, as the name suggests, is a font. Like a font, it is a vector. We also call it a vector icon. It can be enlarged or reduced without distortion;

There are many font icon libraries on the Internet. Here I will introduce the use of iconfont:

Official website: http://www.iconfont.cn/

I won’t tell you how to make it, let’s use it directly (Haha, actually the picture I drew is too ugly);

I originally planned to write about how to use it, but iconfont seems to have been upgraded again, adding symbol writing and supporting multi-color icons (this involves the knowledge of SVG ), the GIF image of the help document on the official website also explains how to apply it very well. I will write about the pitfalls I encountered when I used it for the first time:

"Download Code" button, I hope you can can be found directly. Well, I searched for a while, and by default it asked me to set the color and size. This is to get the materials. The front-end only needs code, click Undo, and then...；

　 I don’t know Is it a problem with my computer (1366*768) or something else? This "Download Code" button is half blocked by the toolbar at the bottom of my windows. Well, this...

Detailed explanation of iconfont font icons and various css small icons

## When we download the font icon, it is a file. When we define the font type in css, don’t forget to set the path correctly;
If We are using iconfont's online project (no downloaded files). When project members update the icon, if we also want to use the new icon, we must also update the "online link";
The font does not support multi-color. If we use the download file method, we can only use the font color to set a single color. If you want to use multi-color icons, you have to use symbol to reference online links; symbol refers to js files, and font-class refers to css files. The writing methods of the two methods are also different;

2. CSS small icons

Masters have used CSS to create various pure CSS graphics. I will only list a few that I use more;

Triangle, please read this article, the summary of border triangle shadow and multiple borders;

Menu (three stripes), use border to double the border The line and the solid line of the lower border can also be reversed:

Detailed explanation of iconfont font icons and various css small icons

The code is as follows:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .menu{
                margin: 100px;
                width: 55px;
                height: 10px;
                border-top: 30px double #f00;
                border-bottom: 10px solid #f00;
                /*用border上边框双线和下边框实线，也可以反着来*/
            }
        </style>
    </head>
    <body>
        <p class="menu"></p>
    </body></html>

Copy after login

Inner concave corner, the master's method, click here, use the css3 attribute radial gradient radial-gradient to do:

The radial gradient of the background image can be set: the center position of the circle, the size of the gradient, the shape of the gradient, and the color at the center of the circle Width, ... , color width at the end;

Detailed explanation of iconfont font icons and various css small icons

　　代码如下：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{padding: 0;margin: 0;}
            a{text-decoration: none;cursor: pointer;}
            li{list-style: none;}
            /*清除浮动*/
            .clearfix:before, /*:before处理margin上下重叠*/
            .clearfix:after {
                content: ""; 
                display: table;
            }
            .clearfix:after {
                clear: both;
            }
            .clearfix {
                zoom: 1;
            }
            
            .test{
                margin: 100px 0 0 100px ;
            }
            .list{
                margin-left: -20px;
            }
            .content{
                width: 320px;
                background: #7fd6f1;
                min-height: 200px;
            }
            .item .active{
                background: #7fd6f1;
                color: #333;
            }
            .item{
                float: left;
                margin-left: 30px;
            }
            .item a{
                display: block;
                background: #ce4be2;
                width: 80px;
                height: 35px;
                text-align: center;
                line-height: 35px;
                color: #fff;
                border-radius: 10px 10px 0 0;
                position: relative;
            }
            .item a:after{
                content: "";
                display: block;
                position: absolute;
                right: -9px;
                 /*不知大家是否发现，在边缘处其实是有1px的变化的，弧度到最后不是很自然，这里我们其实可以把位置往里1px*/
                bottom: 0;
                width: 10px;
                height: 10px;
                 background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 /*背景图径向渐变可以设置：圆心位置，渐变的大小，渐变的形状，圆心处的颜色 宽度， ... ，结尾处的颜色宽度*/
                 /*圆心位置默认为center，我们这里设置圆心为元素左顶点和右顶点*/
                 /*渐变的大小默认为farthest-corder ,我们这里设置的farthest-side*/
                 /*渐变的形状默认为ellipse（椭圆），我们这里得设置成circle（圆形），但是宽高一样的椭圆不就是圆形么，so...*/
                 /*颜色和宽度的设置，我们在离元素宽度还有1px的时候变化，所以这里是10-1=9px；*/
            }
            .item a:before{
                content: "";
                display: block;
                position: absolute;
                left: -9px;
                bottom: 0;
                width: 10px;
                height: 10px;
                 background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
                 background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #ce4be2 100%);
            }
            .item .active:after{
                background: -webkit-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -o-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -moz-radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: radial-gradient(100% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
            }
            .item .active:before{
                background: -webkit-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -o-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: -moz-radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
                 background: radial-gradient(0% 0%, farthest-side, transparent 0%, transparent 8px, transparent 9px, #7fd6f1 100%);
            }
        </style>
    </head>
    <body>
        <p class="test">
            <ul class="list clearfix">
                <li class="item">
                    <a href="javascript:;" >新闻</a>
                </li>
                <li class="item">
                    <a href="javascript:;" class="active">娱乐</a>
                </li>
                <li class="item">
                    <a href="javascript:;">体育</a>
                </li>
            </ul>
            <p class="content"></p>
        </p>
    </body></html>

Copy after login

　　还有很多css制作的经典图形，以后再整理吧；

　　其实，css制作的图标和图片代替的图片都很棒，根据需求吧。我更喜欢字体图标和图片的方式，效率更高，简单。

更多Detailed explanation of iconfont font icons and various css small icons相关文章请关注PHP中文网！