Lors de la rédaction de pages frontales, nous utilisons souvent des images comme de petites icônes. Si vous utilisez l'image, le code est plus gênant. Récemment, j'ai trouvé une méthode pratique et pratique, utilisez-la directement directement.1. Introduire des méthodes de fonctionnement de l'image
Tout d'abord, nous entrons dans l'URL: https://www.iconfont.cn/
Si vous ne vous souvenez pas de ce site Web, vous pouvez rechercher sur Baidu: Alibaba Vectors, et ce site Web apparaîtra;
Voici deux méthodes plus couramment utilisées et pratiques.
Méthode 1: référence de classe de policeÉtape 1: Entrez le site Web et nous pouvons voir une zone de recherche, entrez directement le nom de l'icône que vous souhaitez, ou vous pouvez le trouver dans la bibliothèque d'icônes.
Étape 2: Ensuite, ajoutez au panier.
Étape 3: Cliquez sur le panier pour créer un nouveau projet et confirmez que si vous souhaitez ajouter une image au même projet, vous n'avez pas besoin de le recréer à nouveau.
Étape 4: Ensuite, la page suivante apparaîtra, copiera le code et référencera le document de code.
<link rel = Stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js>
Étape 5: Lors de l'introduction du code, n'oubliez pas d'ajouter HTTP:
Étape 6: Sélectionnez l'icône correspondante et obtenez le nom de classe pour copier et coller, utilisez sans références src = / img / bvbb5hz / voir src = https: //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title = Image.jpg>
<body> <i class / = iconfont icon-xxx> </i> </ body>Méthode 2: référence de symbole
Étape 1: Si un projet souhaite utiliser plusieurs icônes, vous pouvez également sélectionner les icônes que vous souhaitez utiliser et les ajouter au panier, puis cliquez sur le code de mise à jour, puis mettez à jour la connexion de référence de code. Cette méthode doit être téléchargée localement.
Étape 2: Après le téléchargement, vous pouvez voir certains fichiers dans le dossier et introduire des fichiers JS sur la page du code.
<link rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </ script>
Étape 3: Mettez le package de fichiers dans le même répertoire, afin que la référence à l'icône puisse prendre effet.
Étape 4: À la même méthode, nous devons nous référer au nom de l'image ci-dessous l'icône, et copier et coller le nom de l'image dans SVG et remplacer href = modifier le nom.
<svg class = icon aria-hidden = true> <use xLink: href = # icon-079aiqing> </ use> </svg>
Étape 5: En plus d'introduire les deux adresses de fichiers ci-dessus sur la page du code, nous devons également introduire un code de style.
<style> .icon {width: 1em; hauteur: 1em; Adigne vertical: -0,15em; Remplir: CurrentColor; débordement: caché; } </ style>Voici tous les codes de référence
<! Doctype html> <html lang = en> <éad> <meta charset = utf-8> <meta name = viceport = width = device-width, initial-scale = 1.0> <meta http-equiv = x-ua-compatible content = ie = edge> <title> alibaba vector </tape> <lien rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </ script> </ head> <style> .icon {width: 1em; hauteur: 1em; Adigne vertical: -0,15em; Remplir: CurrentColor; débordement: caché; } </ style> <body> <entrée type = Text placeholder = search> <svg class = icon aria-hidden = true> <use xLink: href = # icon-079aiqing> </ use> </svg> </odody> </html>Effet de code:
Résumer:La première méthode peut être utilisée directement en l'introduisant, ce qui est rapide et pratique, et ne nécessite pas de téléchargement, ce qui est plus pratique à utiliser. Les inconvénients ne peuvent être utilisés que seuls et ne soutiennent pas la couleur.
La deuxième méthode prend en charge des images multicolores et multiples, et l'effet de l'introduction de plusieurs images sera mieux. Les inconvénients doivent être téléchargés dans le package de fichiers locaux et doivent être placés dans le même répertoire avant utilisation.
Dans l'ensemble, les graphiques vectoriels Alibaba sont très utiles aux développeurs frontaux et sont libres à utiliser. Vous pouvez utiliser les méthodes ci-dessus en fonction de vos besoins.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.