Cómo usar íconos de caracteres CSS Cómo usar íconos de fuentes CSS

Fuentes CSS, íconos, múltiples implementaciones de íconos ¿Qué son los íconos? Primero echemos un vistazo a un ejemplo:

Tomémoslo como ejemplo. Todas las partes marcadas con un círculo en la imagen son iconos.

En este momento quieres preguntar, ¿no son sólo imágenes?

No, no es una imagen, es texto.

¿Qué? Látigo ¿Cómo podrían ser estas palabras? ¿Cómo podría ser así el texto? ...

Como puede ver, los íconos utilizados por la mayoría de las páginas web en el mercado tienen formas similares y hay muchas bibliotecas de íconos disponibles para que las usemos.

Esto se puede lograr de las siguientes maneras:

Primero necesitamos saber:

¿Cómo hacer que la página muestre el ícono? Podemos manipular iconos como texto. Los pasos son los siguientes:

El siguiente es un ejemplo de uso específico, puede probarlo:

o

Muchas personas en China llaman CSSSprites a CSSsprites. Un método de procesamiento de imágenes de páginas web. Le permite incluir todas las imágenes dispersas involucradas en una página en una imagen grande, de modo que cuando visite la página, las imágenes cargadas no se mostrarán una por una como antes. Dada la popularidad actual de Internet, el tiempo de carga de una sola imagen que no exceda los 200 KB es básicamente el mismo, por lo que no hay necesidad de preocuparse por este problema.

La clave para mejorar la velocidad no es reducir la calidad, sino reducir la cantidad. El corte de papel tradicional es muy delicado. Cuanto menor sea el tamaño de la imagen, mejor y menor será el peso. De hecho, no importa el tamaño de la imagen, la computadora lo calcula en bytes. Cada vez que el cliente muestra una imagen, envía una solicitud al servidor. Entonces, cuantas más imágenes, más solicitudes y mayor será el potencial de latencia.

Ejemplo:

Haga referencia a esta clase... Luego defina las coordenadas de fondo una por una en los elementos... Los siguientes son los atributos clave...

Es necesario limitar el tamaño del contenedor para que coincida con la posición del elemento de la imagen de fondo. Además, el eje XY se calcula en relación con la esquina superior izquierda de toda la imagen, por lo que el valor debe calcularse claramente.