El uso de una fuente basada en imágenes puede ser una forma divertida y rápida de implementar iconos en su sitio. Es un proceso súper fácil que le brinda total libertad para volver a cambiar el tamaño de sus íconos en cualquier momento.
Hoy usaremos la excelente fuente Pictos para crear una página web simple para que pueda tener una idea del proceso.
Usando una fuente para los iconos
El acuerdo de diseño de esta semana incluye la impresionante fuente Pictos, que contiene 96 iconos mínimos que son perfectos para el diseño web. Lo mejor de esta fuente es que no solo obtiene una versión impresa, sino también una carpeta llena de varios formatos para usar en la web.
Lo que esto significa es que podemos usar fácilmente @ font-face para incrustar la fuente Pictos en un sitio y luego utilizar los iconos en lugar de las imágenes. En caso de que estés un poco confuso sobre cómo se hace esto, quise elaborar un rápido tutorial que te guíe en una implementación básica de la fuente.
Incluso si eres bastante nuevo en CSS, esto debería ser una brisa. De alguna manera, ¡en realidad es más fácil que trabajar con imágenes! Empecemos.
HTML básico y CSS
Lo primero que debe hacer es iniciar un kit de inicio básico con un archivo HTML y un archivo CSS. El código de abajo es con lo que normalmente comienzo.
CSS
Para pequeños proyectos como este, no me gusta meterme con grandes reinicios, si prefiere algo más extenso, no dude en incluirlo.
Cuerpo CSS
Para el cuerpo, todo lo que tenemos que hacer es establecer el tamaño de fuente base y aplicar una imagen de fondo. Quería algo sutil pero atractivo, así que naturalmente me detuve en Patrones sutiles y descargué las? Pecas sutiles? textura. Este sitio es asombroso y se está convirtiendo rápidamente en una de mis paradas para los recursos de diseño rápido.
Todo lo que tiene que hacer es aplicar el archivo descargado al fondo y configurarlo para que se repita.
Párrafo introductorio
Lo primero que vamos a agregar a la página es un párrafo de introducción. Vamos a imaginar que estamos construyendo una página para una aplicación web llamada "Anchorrr". Con eso en mente, inserte el siguiente HTML.
Como puede ver, no hay mucho aquí, solo un contenedor con un div que contiene un encabezado y un párrafo. Vamos a diseñar esto para que se vea bien.
Introducción al párrafo CSS
Para diseñar esta sección, comenzamos aplicando un ancho y un margen al contenedor. Usamos auto Márgenes para centrar el recipiente en el cuerpo y desbordamiento: oculto Para ayudar a despejar los flotadores estaremos usando.
A continuación, aplicamos un ancho a la introducción Div y flotar a la izquierda. Utilicé un poco de taquigrafía para el fuente Propiedad para mantener las cosas bonitas y concisas. Tenga en cuenta que el altura de la línea no tiene una unidad asociada, lea más sobre eso aquí.
Como se puede ver en la vista previa anterior, en realidad tenía un enlace en mi versión, que requería un poco de estilo adicional:
El gran ancla
A continuación, queremos agregar una imagen grande de un ancla, que simplemente reside en nuestra fuente Pictos. Lo primero que tenemos que hacer es incrustar la fuente en nuestro CSS, luego insertar el ancla en nuestro HTML y, finalmente, volverlo a diseñar en CSS.
Insertar la fuente Pictos
Afortunadamente, la fuente viene con un fragmento específico para esta tarea, por lo que nuestro trabajo aquí es increíblemente mínimo. Todo lo que tiene que hacer es mover los archivos de fuentes a la carpeta de su proyecto y pegar lo siguiente en su archivo CSS.
Inserte el ancla en su HTML
Como incrustar la fuente, insertar el carácter no podría ser más fácil. Todo lo que tenemos que hacer es mirar el mapa de caracteres a continuación para encontrar la imagen que queremos y luego escribir esa letra en un párrafo en nuestro CSS.
Como puede ver, el ancla se puede implementar a través de la minúscula? A? en la fuente Así es como implementamos esto en nuestro HTML.
Fácil verdad? Inicialmente, solo aparecerá en minúscula? A ?, así que saltemos a nuestro CSS para darle un estilo.
Estilo del ancla
Para convertir nuestra simple carta en un ícono, debemos asegurarnos de que la fuente esté configurada con la fuente Pictos que incrustamos anteriormente. Tenga en cuenta que, dado que este es el tipo de trabajo con el que estamos trabajando, podemos colocar el anclaje verticalmente a través de altura de la línea propiedad. Jugué con algunos valores diferentes hasta que encontré algo que se veía bien.
También he aplicado algo de magia CSS3 para que el ancla se vea bien. Un poco de RGBa me permitió hacer el ancla ligeramente transparente y un blanco. sombra de texto le da un toque de efecto de tipografía.
Con eso, nuestra sección superior se ve bastante bien! Nuestro ancla está en su lugar y funcionando perfectamente.
Línea divisoria
Antes de comenzar la siguiente sección, quiero crear una división visual clara con una línea sólida. Ya que el contenido que acabamos de presentar está todo envuelto en un contenedor agradable, esto es bastante fácil de hacer con un borde simple.
Al igual que con el icono del ancla, he combinado el borde inferior Con una sombra para darle un poco más de dimensión.
El resultado es un divisor simple y efectivo entre nuestras dos secciones.
Añadiendo las tres columnas
La siguiente sección contendrá tres columnas de texto y simulará sus características típicas. sección en un sitio de aplicación web. Naturalmente, también queremos incluir algunas indicaciones visuales y nuestra fuente Pictos sirve como la herramienta perfecta para hacer precisamente eso.
Características HTML
El primer paso aquí es implementar el marcado básico para nuestras tres columnas. Usaremos tres párrafos y encabezaremos cada uno con una h3 Eso mantendrá los iconos. Entré y escogí algunas buenas letras para usar, siéntete libre de elegir las tuyas para un efecto diferente.
Cada columna recibe la misma clase para que podamos unirlas todas juntas y la última agrega una clase adicional para que podamos eliminar los márgenes fácilmente.
Características: CSS básico
Para comenzar con la sección de características CSS, solo necesitamos un CSS súper básico como el que usamos antes. En este punto, todo esto debería tener perfecto sentido.
Observe que, una vez más, implementé la fuente Pictos, pero solo en el h3 etiquetas
Características: Columna CSS
Establecí el ancho de esta página de manera bastante arbitraria, lo que puede dificultar un poco la implementación de las columnas. Los sistemas de cuadrícula utilizan valores como 960px porque son fáciles de dividir en varias variaciones de columna.
Sin embargo, crear su propio sistema de columnas sobre la marcha es bastante fácil. De hecho, cubrí este mismo tema en un artículo reciente. Usaremos esta misma técnica a continuación.
Básicamente, comenzamos con el 100% de ancho. Si queremos un margen derecho del 4% aplicado a dos de las columnas, eso nos lleva al 92%. Dividimos eso por tres columnas para obtener aproximadamente 30.66667%, que es el ancho de nuestra columna. Esto distribuirá automáticamente tres columnas sobre el ancho del contenedor.
Como se puede ver en la vista previa a continuación, nuestras columnas salieron bastante impresionantes. Cada uno está rematado con un pequeño y bonito icono, que agrega un considerable interés visual a la página.
La demo
Con eso, nuestra página web está todo terminado. Usando solo CSS, pudimos implementar iconos hermosos con facilidad, ¡no se requieren imágenes! Como puede imaginar, el uso de esta técnica en un sitio realmente grande podría ahorrarle mucho tiempo. La mejor parte es que, una vez que carga la fuente una vez, está listo para comenzar y puede acceder fácilmente a cualquiera de los íconos que se encuentran dentro.
Demostración en vivo: Haga clic aquí
Conclusión
En resumen, usar una fuente basada en imágenes como Pictos puede ser un gran truco para colocar iconos en su sitio con muy poco esfuerzo. Simplemente use @ font-face para incrustar la fuente e inserte / estilice los iconos como lo haría con cualquier otro texto.
Si está interesado en obtener la fuente Pictos, diríjase a nuestra página de ofertas. ¡Sea rápido, nuestra oferta termina el lunes 25 de julio!