Cree su propio icono de fuente establecido fácilmente con Fontello

Podemos ver que los iconos de fuentes se utilizan ampliamente en todos los sitios web, y por buenas razones. El icono de fuente es confiable, se ve nítido y nítido en una pantalla de PPP alta, y se puede ajustar fácilmente en términos de tamaño de icono, color y posición del icono a través de CSS. Esto hace que los íconos de fuentes sean fáciles de animar con Transformaciones y Transiciones CSS3 también.

Hay una gran cantidad de conjuntos de iconos de fuentes disponibles para usar de inmediato, pero es posible que no siempre cubran todas sus necesidades. Es posible que desee personalizar sus iconos, en cuyo caso, quizás sea mejor que cree su propio conjunto de iconos.

Con todas las herramientas que tenemos ahora, crear su propio conjunto de iconos de fuentes no es tan difícil como solía ser. En esta publicación, le mostraremos cómo hacer esto fácilmente. Vamos a ver.

Preparar los iconos

Antes que nada, tenemos que preparar los íconos. Los iconos deben estar en forma de vector. Si está familiarizado con aplicaciones vectoriales como Adobe Illustrator, Inkscape y CorelDraw, puede crear sus propios iconos. Asegúrese de que los iconos conserven rasgos uniformes y luego expórtelos en formato SVG .

Alternativamente, también puede recopilar iconos de SVG que están disponibles en línea de forma gratuita.

En este ejemplo, usaremos los iconos SVG de Ionicons. Ionicons en realidad tiene su propio icono de fuente, pero en este ejemplo solo vamos a extraer algunos para explicar cómo crear su propio conjunto de iconos.

Esto es lo que elegí:

Algunos de estos iconos consisten en múltiples formas. Entonces, antes de que podamos ponerlos como un ícono de fuente, tenemos que fusionar las formas en un compuesto. Para hacerlo, abra .svg en Illustrator. Seleccione todas las formas y vaya a: Objeto > Ruta compuesta > Crear .

Haga esto con los otros íconos también.

Crear fuente

Fontello facilita la creación de icono de fuente. Además de recoger íconos de los populares conjuntos de iconos de fuentes, Fontello también nos permite cargar íconos externos. Simplemente arrastre y suelte todos los iconos seleccionados en Fontello . Una vez que se cargan, aparecerá en la sección Iconos personalizados, como tal.

Puede hacer clic en el ícono del lápiz para editar las propiedades del ícono, a saber, el nombre CSS y el código hexadecimal.

Seleccione sus iconos personalizados, establezca el nombre de su fuente y haga clic en el botón Descargar.

Fontello generará todos los formatos de fuente necesarios: .eot, .eot, .ttf y .woff . y las hojas de estilo más la demostración.

Eso es. Crear iconos de fuentes nunca ha sido más fácil que esto. Espero que este consejo te sea útil.

15 complementos de jQuery para hacer elementos inteligentes y pegajosos

Ahora es común ver ciertos elementos en un sitio fijo en una posición cuando se desplaza hacia arriba o hacia abajo del sitio, por ejemplo, el menú de navegación, el encabezado o la barra lateral. Esto permite que el elemento esté disponible sin importar la posición del usuario.Llamado un elemento adhesivo, esto se puede lograr simplemente mediante el uso de CSS, sin embargo, con este método, el efecto no es confiable en varios navegadores. Es po

(Consejos de tecnología y diseño)

Cómo reconocer y administrar la deuda UX

La deuda de la experiencia del usuario inevitablemente pasa con el tiempo. Es la suma del retraso en el diseño y las tareas de usabilidad derivadas de cosas como decisiones comerciales rápidas, atajos de diseño, oportunidades perdidas, restricciones de tiempo y otros factores.La deuda de la experiencia del usuario se denomina deuda, ya que es similar a la deuda de la vida real; obtenemos algo en el presente, pero solo pagamos en el futuro . H

(Consejos de tecnología y diseño)