Al escribir páginas front-end, a menudo usamos algunas imágenes como pequeños iconos. Si usa la imagen, el código es más problemático. Recientemente, encontré un método conveniente y práctico, solo úselo directamente.1. Introducir métodos de operación de imagen
Primero, ingresamos a la URL: https://www.iconfont.cn/
Si no puede recordar este sitio web, puede buscar en Baidu: Alibaba Vectors, y este sitio web aparecerá;
Aquí hay dos métodos más utilizados y convenientes.
Método 1: referencia de clase de fuentePaso 1: ingrese el sitio web y podemos ver un cuadro de búsqueda, ingrese directamente el nombre del icono que desee, o puede encontrarlo en la biblioteca de iconos.
Paso 2: luego agregue al carrito de compras.
Paso 3: haga clic en el carrito de compras para crear un nuevo proyecto y confirme que si desea agregar una imagen al mismo proyecto, no necesita recrearlo nuevamente.
Paso 4: A continuación, aparecerá la siguiente página, copiará el código y referencia al documento del código.
<link rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js>
Paso 5: Al introducir el código, recuerde agregar http:
Paso 6: Seleccione el icono correspondiente y haga que el nombre de la clase copie y pegue, use no-reeferrer src =/img/bvbb5hz/ver src = https: //cdn.segmentfault.com/v-5e05cb79/global/img/squares.svg title.jpg>
<body> <i class/= iconfont icon-xxx> </i> </body>Método 2: Referencia de símbolos
Paso 1: si un proyecto quiere usar múltiples iconos, también puede seleccionar los iconos que desea usar y agregarlos al carrito de compras, luego haga clic en Actualizar código y luego actualizar la conexión de referencia del código. Este método debe descargarse localmente.
Paso 2: Después de descargar, puede ver algunos archivos en la carpeta e introducir archivos JS en la página de código.
<link rel = stylesheet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script>
Paso 3: Coloque el paquete de archivo en el mismo directorio, para que la referencia al icono pueda entrar en vigencia.
Paso 4: al mismo método, debemos consultar el nombre de la imagen debajo del icono, y copiar y pegar el nombre de la imagen en SVG, y reemplazar href = cambiar el nombre.
<svg class = icon aria-hidden = true> <use xlink: href =#icon-079aiqing> </suse> </svg>
Paso 5: Además de introducir las dos direcciones de archivo anteriores en la página del código, también necesitamos introducir un código de estilo.
<syle> .icon {ancho: 1em; Altura: 1em; Align vertical: -0.15em; Relleno: CurrentColor; desbordamiento: oculto; } </style>Los siguientes son todos los códigos de referencia
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <meta name = viewport content = width = dispositivo-width, inicial-escale = 1.0> <meta http-oquiv = x-ua compatible content = iE = borde> <title> alibaba vector </title> <linkatsHeet href = http: //at.alicdn.com/t/font_1587841_2580lrwj551.js> <script src = iconfont.js> </script> </head> <style> .icon {ancho: 1em; Altura: 1em; Align vertical: -0.15em; Relleno: CurrentColor; desbordamiento: oculto; } </style> <body> <input type = text placeHolder = search> <svg class = icon aria-hidden = true> <use xlink: href =#icon-079aiqing> </suse> </svg> </body> </html>Efecto del código:
Resumir:El primer método se puede usar directamente introduciéndolo, que es rápido y conveniente, y no requiere la descarga, lo cual es más conveniente de usar. Las desventajas solo se pueden usar solas y no admiten el color.
El segundo método admite imágenes multicolor y múltiples, y el efecto de la introducción de múltiples imágenes será mejor. Las desventajas deben descargarse al paquete de archivos local y deben colocarse en el mismo directorio antes de usar.
En general, los gráficos de Alibaba Vector son muy útiles para los desarrolladores frontales y son de uso gratuito. Puede usar los métodos anteriores de acuerdo con sus necesidades.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.