Anteriormente, al crear sitios, tenía que usar iconos de mapa de bits. Era hermoso, pero inconveniente por varias razones. Hoy en día, los iconos vectoriales han reemplazado a los iconos rasterizados. Esta es una solución original y elegante que decorará y refrescará su sitio.
Instrucciones
Paso 1
Existe un buen servicio web para crear fuentes a partir de iconos. Se llama Fontastic. Es completamente gratis y sin publicidad. El primer paso es registrarse en el sitio web del servicio. Vaya al sitio web fontastic.me, ingrese su dirección de correo electrónico en los campos de entrada y cree una contraseña, luego haga clic en el botón amarillo grande "Crear su fuente de icono". A veces sucede que no se muestra información que confirme el registro exitoso. No se preocupe, continúe con el siguiente paso.
Paso 2
Ahora haga clic en el botón "Iniciar sesión" ubicado en la esquina superior derecha. En la página que se abre, ingrese su correo electrónico y contraseña nuevamente, presione el botón "Iniciar sesión".
Después de esperar unos segundos, se abrirá el panel para crear fuentes a partir de iconos.
Paso 3
Aquí hay una gran selección de íconos. Al hacer clic en los iconos que desee con el mouse, seleccione tantos iconos como necesite. En la parte superior, después de la palabra "PUBLICAR", se indica el número de iconos seleccionados.
Paso 4
Si no tiene suficientes iconos del número presentado, desplácese hacia abajo hasta la parte inferior de la página y busque el botón que dice "Agregar más iconos". Haz click en eso.
Paso 5
Se abrirá una página con paquetes de iconos adicionales. Algunos de ellos son de pago (etiquetados como "Premium"), otros son gratuitos. Para activar iconos adicionales, presione el botón "ACTIVAR" en los paquetes seleccionados. Ahora aparecerán en la lista general de iconos disponibles cuando empiece a utilizar el panel de control haciendo clic en el botón "Inicio" en el menú superior.
Paso 6
Si necesita agregar sus propios íconos, en la misma página en la parte superior derecha, haga clic en el botón "IMPORTAR ICONOS". Ahora puede cargar sus propios iconos. Tenga en cuenta que solo se admite el formato vectorial SVG.
Paso 7
Habiendo seleccionado el número requerido de iconos, presione el botón "PERSONALIZAR". Aquí verá todos los iconos seleccionados y puede asignarles nombres de clases arbitrarios, mediante los cuales se referirá a ellos en estilos CSS. O puede dejar los nombres predeterminados que el sistema ha asignado a los iconos.
Paso 8
Presione el botón "PUBLICAR". Aquí puede descargar la fuente de iconos vectoriales creada (botón "DESCARGAR"). Descargue el archivo de fuentes creado por el servicio en su computadora.
Paso 9
El archivo descargado contiene el archivo de estilo CSS, el archivo HTML con los nombres de las clases de iconos y la carpeta "fuentes" con las fuentes. Esta fuente de iconos se puede utilizar en su sitio web.
Paso 10
Para utilizar la fuente de iconos creada, debe hacer lo siguiente:
- descomprima el contenido del archivo y cárguelo en su sitio en el directorio con estilos;
- inserte un enlace a un archivo CSS en la sección HEAD de todas las páginas del sitio que funcionarán con esta fuente de iconos;
- en el código de la página, usamos el nombre de las clases creadas previamente para usar la fuente del icono recién creada.
