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

Home

Web Front-end

CSS Tutorial

Detailed explanation of iconfont font icons and various css small icons

高洛峰

Mar 04, 2017 pm 05:04 PM

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>

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>

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

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

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

How much specificity do @rules have, like @keyframes and @media?Apr 18, 2025 am 11:34 AM

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Can you nest @media and @support queries?Apr 18, 2025 am 11:32 AM

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

Quick Gulp Cache BustingApr 18, 2025 am 11:23 AM

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

In Search of a Stack That Monitors the Quality and Complexity of CSSApr 18, 2025 am 11:22 AM

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Datalist is for suggesting values without enforcing valuesApr 18, 2025 am 11:08 AM

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

Front Conference in ZürichApr 18, 2025 am 11:03 AM

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

Building a Full-Stack Serverless Application with Cloudflare WorkersApr 18, 2025 am 10:58 AM

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

Creating Dynamic Routes in a Nuxt ApplicationApr 18, 2025 am 10:53 AM

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly

See all articles