Explication détaillée des icônes de police Iconfont et de diverses petites icônes CSS

Avant-propos : Il s'agit de la propre compréhension et organisation de l'auteur après ses études. S'il y a des erreurs ou des questions, veuillez me corriger et je continuerai à mettre à jour !

1. icône de police iconfont

Dans nos besoins, nous voyons souvent quelques petits graphiques, ou icônes, comme sur le site Tmall :

Nous pouvons remplacer ces petits graphiques par des images. Habituellement, nous découpons ces graphiques en diagrammes de sprites (également appelés diagrammes de sprites)

Le principe des diagrammes de sprites : rassembler de nombreuses petites images en une grande image ; , puis affichez l'image en définissant la position de l'image d'arrière-plan ;

Avantages des sprites : réduisez le nombre de requêtes du serveur et réduisez la pression du serveur

les sprites sont une très bonne création de sprites ;

Bien sûr, il existe d'autres façons de créer ces petits graphiques, comme l'icône de police iconfont utilisée par Tmall dans l'image ci-dessus; le nom l'indique, est une police. Comme les polices, elle est vectorielle. Nous l'appelons également icône vectorielle. Elle peut être agrandie ou réduite à volonté sans distorsion

Il existe de nombreuses bibliothèques d'icônes de polices sur Internet ; Je vais vous présenter l'utilisation d'iconfont :

Site officiel : http://www.iconfont.cn/

Je ne vous dirai pas comment le faire, utilisons-le directement (Haha, en fait l'image que j'ai dessinée est trop moche

J'allais à l'origine écrire sur la façon de l'utiliser, mais iconfont semble avoir été à nouveau mis à jour, ajoutant l'écriture de symboles et prenant en charge plusieurs -icônes de couleur (cela implique la connaissance de SVG), l'image GIF du document d'aide sur le site officiel explique également très bien comment l'appliquer. J'écrirai sur les pièges que j'ai rencontrés lorsque je l'ai utilisé pour la première fois :

Bouton "Télécharger le code", j'espère que vous pourrez être trouvé directement. Eh bien, j'ai cherché pendant un moment, et par défaut, on m'a demandé de définir la couleur et la taille. Il s'agit d'obtenir les matériaux. Le front-end n'a besoin que de code, cliquez sur Annuler, puis... ; > Je ne sais pas Est-ce un problème avec mon ordinateur (1366*768) ou autre chose ? Ce bouton "Télécharger le code" est à moitié bloqué par la barre d'outils en bas de mes fenêtres, eh bien, ceci...

                                                          Après avoir téléchargé l'icône de police, il s'agit d'un fichier. Lorsque nous définissons le type de police dans. css, n'oubliez pas de définir le chemin correctement ;

Si nous utilisons le projet en ligne iconfont (aucun fichier téléchargé lorsque les membres du projet mettent à jour l'icône, si nous). Nous voulons également utiliser la nouvelle icône, nous devons également mettre à jour le « lien en ligne » ;

La police ne prend pas en charge le multicolore. Si nous utilisons la méthode de téléchargement de fichiers, nous ne pouvons que le faire. utilisez la couleur de la police pour définir une seule couleur. Si vous souhaitez utiliser des icônes multicolores, vous devez utiliser symbol pour référencer des liens en ligne ; symbol fait référence aux fichiers js et font-class fait référence aux fichiers css. Les méthodes d'écriture des deux méthodes sont également différentes ; 🎜>

• 

  2. Petites icônes CSS
• Les maîtres ont utilisé le CSS pour créer divers graphiques CSS purs. Je n'en énumérerai que quelques-uns que j'utilise davantage

  .

  　
Triangle
• , veuillez lire cet article, le résumé de l'ombre du triangle de bordure et des bordures multiples
  　
Menu (trois bandes)

, utilisez la bordure pour doubler la bordure ; Le trait et le trait plein de la bordure inférieure peuvent également être inversés :

　

Le code est le suivant :

Angle concave , la méthode du maître, cliquez ici, utilisez l'attribut css3 radial gradient radial-gradient pour le faire :

Le dégradé radial de l'image de fond peut être défini : la position centrale du cercle, la taille du dégradé, la forme du dégradé et le centre du cercle La largeur de couleur de, ... , la largeur de couleur à la fin ;

　　代码如下：

<!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制作的图标和图片代替的图片都很棒，根据需求吧。我更喜欢字体图标和图片的方式，效率更高，简单。

 更多Explication détaillée des icônes de police Iconfont et de diverses petites icônes CSS相关文章请关注PHP中文网！