Tutoriales En Linea Tutoriales En Linea
  • Tutoriales
    • Aprendizaje
    • Video Tutorial
    • Manuales
    • Hagalo usted mismo
    • Explorar todo
  • Adobe
    • After Effects
    • Dreamweaver
    • Premiere Pro CC
    • Photoshop
    • Photoshop Mix
    • Lightroom
    • Illustrator
    • Adobe Muse
    • Creative Cloud
  • Android
    • Developer Android
    • Aplicaciones
    • Android Studio
    • Android Wear
    • Desarrolladores
    • SDK Platform-Tools
    • ADB...depuración Bridge
    • Fastboot
    • Root
    • Recovery
  • Apple
    • iPhone y iPad
    • iPhone
    • iPad
    • Mac OS
    • iCloud
    • iTunes
  • Cursos
    • Actívate
    • Autoempleo
    • Idiomas
    • Curso De HTML
    • Curso de C++
    • Javascript
    • jQuery
    • Matematicas
    • Programacion
    • Python
    • Udacity
    • Diseño Web adaptativo
  • Ciberseguridad
    • Malware
    • Ransomware
    • Virus
    • Troyano
    • Dorkbot
    • Filecoders
    • keylogger
    • Spyware
    • Jackware
    • DDoS
    • HackerOne
    • Interpol
  • Criptomonedas
    • Blockchain
    • Mineria de Criptomonedas
    • Bitcoin (BTC)
    • Bitcoin Cash (BCH)
    • DASH (Dash)
    • Dogecoin (Doge)
    • Ethereum (ETH)
    • Litecoin (LTC)
    • Monero (XMR)
    • Ripple (XRP)
    • Zcash (ZEC)
    • Forex
    • Trading
  • Desarrollo Web
    • Sistema de gestion de contenidos
    • AMP
    • Datalife Engine
    • Blogger
    • WordPress
    • Joomla
    • Bootstrap
    • Plantillas
    • @font-face
    • Schema
    • Website
    • Desarrolladores
    • Lenguaje Web
  • Diseño Web
    • Web Responsive
    • Lenguaje Web
    • Datos estructurados
    • HTML
    • CSS3
    • JavaScript
    • Ajax
    • jQuery
    • PHP
  • Entretenimiento
  • Encuestas
    • GlobalTestMarket
    • Centro de opinion
    • Ipsos i-Say
    • Triaba
    • Panel opinea
    • Toluna
    • YouGov
    • ClixSense
    • ySense
    • Panel Cint
    • Beruby
  • Electricidad
  • Electronica
  • Ganar dinero comprando
    • CashbackDeals
    • Cashback
    • Por ir de compras
    • Aklamio
    • Intercambio de tráfico
    • Justificante de pagos
    • Webs estafas
  • Google
    • Google Pay
    • Adsense
    • Gmail
    • Google Apps
    • Google Chrome
    • Google Cloud Platform
    • Google Consumer Surveys
    • Google Desarrolladores
    • Google Fit
    • Google Maps
    • Google Photos
    • Google Play
    • Google Translation
    • DoubleClick
    • YouTube
    • Chromebooks
  • Marketing
    • SEM
    • SEO
    • Posicionamiento
    • Contenido
    • Publisuites
    • Space Content
    • Coobis
    • Marketing
  • Computadora u ordenador
    • Sistemas operativos
      • Windows
      • Mac OS
      • Android
      • Linux
      • Ubuntu
      • Kali Linux
      • Wifislax
    • hardware
    • Software
    • BIOS
    • Unidad de disco duro
    • Programacion
    • Dispositivos
    • Internet
  • Ofimática
    • Microsoft
    • Suite Ofimatica
    • Access
    • Word
    • Excel
    • Powerpoint
    • Outlook
    • Microsoft Publisher
  • PTC
    • No pierdas tiempo con estas web
  • Redes Sociales
    • Delicious
    • Facebook
    • Instagram
    • linkedin
    • Snapchat
    • TikTok
    • Twitter
    • Pinterest
    • Spotify
    • Vkontakte - VK
    • WhatsApp
  • Smartphone
    • Telefonos
    • Telefonia movil y telecomunicaciones
    • Desbloquear
    • Códigos NCK
    • Liberar
    • Tarjeta SIM
    • Tablet
  • Sitio Web
    • Dominios
    • Hosting
    • Servidores
    • Demo DLE
    • Documentación sobre Datalife Engine
    • Modulos DLE
    • Hack
    • Optimizacion
    • Google Adsense
    • Plantillas
  • Tips
    • Cabello
    • Consejos
    • Cremas
    • Cosmético
    • Cuerpo
    • Dieta
    • Exfoliantes
    • Entrenamiento
    • Ejercicio
    • Estilo
    • Fitness
    • Habitos
    • Hidratante
    • Look
    • Maquillaje
    • Moda
    • Piel Radiante
    • Recetas
    • Ropa
    • Rutina
    • Salud
    • Tratamientos
  • Trabajos
    • Atencion al cliente
    • Asistente virtual
    • Transcripcíon
    • Transcripcíones medica
    • Entrada de datos
    • De edicion y correccion
    • Mystery Shopping
    • Micro trabajos
    • Contabilidad
    • Tutoria y aprendizaje
    • Mas ingresos extras
  • Webmasters
    • Git
    • GitHub
    • Criptografia
    • Deep Web
    • Hacker
    • FTP
    • Indexar
    • Newsletter
    • Redes y VPN
    • Herramientas online
  • Windows
    • Skype
    • Windows
    • Windows 11
    • Windows 10
    • Windows 8
    • Windows 7
    • Puerta trasera de Windows
    • Microsoft Edge
Facebook Twitter YouTube Instagram Linkedin
  • Sobre nosotros
  • Últimos artículos
  • Herramientas SEO
  • Ver mas temas
  • Más sitios que te gustarán
Tutoriales En Linea Tutoriales En Linea
  • Secciones
    1. Android
    2. Adobe
    3. Bricolaje
    4. Bachillerato
    5. Cursos
    6. Criptomonedas
    7. Criptografia
    1. Diseño Web
    2. Encuestas
    3. Empleo
    4. Electricidad
    5. Electronica
    6. Forex
    7. Fisica
    1. Google
    2. Hardware
    3. Herramientas Ofimaticas
    4. Herramientas
    5. Internet
    6. Idiomas
    7. IPTV
    1. Lenguajes De Programacion
    2. Libros
    3. Microsoft
    4. Manuales
    5. Matematica
    6. Newsletter
    7. Optimizacion
    1. Redes Sociales
    2. Software
    3. Seguridad
    4. Telefonia
    5. WebSite
    6. Webmasters
    7. Ver todas las categorias
    8. Post promocionado
  • Smartphone
    Aprende cómo conectarte a una red móvil de forma manual

    Aprende cómo conectarte a una red móvil de forma manual

    Los smartwatch: ¿La nueva tendencia en tecnología?

    Los smartwatch: ¿La nueva tendencia en tecnología?

    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

    Llega su fin a las aplicaciones preinstaladas para una experiencia de usuario mejorada

  • Tecnología
    1. Móviles
    2. Ordenadores
    3. Software
    4. Hardware
    5. Seguridad
    6. Ver todo
    Aprende cómo conectarte a una red móvil de forma manual

    Aprende cómo conectarte a una red móvil de forma manual

    Los smartwatch: ¿La nueva tendencia en tecnología?

    Los smartwatch: ¿La nueva tendencia en tecnología?

    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Cómo AirDroid te ayuda a administrar tu teléfono de forma eficiente

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    Ya puedes usar WhatsApp en múltiples dispositivos inteligentes al mismo tiempo

    How to clean up and optimize your MacBook

    How to clean up and optimize your MacBook

    Cómo crear un USB de arranque para instalar Windows 10 y 11

    Cómo crear un USB de arranque para instalar Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Historia de los sistemas operativos

    Historia de los sistemas operativos

    Cómo migrar de Wix a Shopify [Actualización 2023]

    Cómo migrar de Wix a Shopify [Actualización 2023]

    Libérate de las tareas rutinarias: aprovecha el Software de gestión AgendaPro

    Libérate de las tareas rutinarias: aprovecha el Software de gestión AgendaPro

    How to clean up and optimize your MacBook

    How to clean up and optimize your MacBook

    GameBoyAdvance Online, los juegos de la mítica consola ahora en pantalla completa

    GameBoyAdvance Online, los juegos de la mítica consola ahora en pantalla completa

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Cómo deshabilitar la desfragmentación de SSD y HDD en Windows 10 y 11

    Benefits Of Vertical Dual Monitors For Coding And Programming

    Benefits Of Vertical Dual Monitors For Coding And Programming

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    AMD ha identificado la causa de la quema de los procesadores Ryzen 7000 y ha lanzado un nuevo AGESA para corregir el problema

    Aumenta el rendimiento de tu PC con el overclocking

    Aumenta el rendimiento de tu PC con el overclocking

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    Virus en el sistema DataLife Engine (DLE) y cómo tratarlos

    La ciberseguridad: Vital Para Las Apuestas Online en España

    La ciberseguridad: Vital Para Las Apuestas Online en España

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Microsoft busca aprovechar el increíble talento de las mujeres para ayudar a llenar la brecha de seguridad cibernética

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Cómo rastrear fácilmente la ubicación de sus seres queridos en Android

    Aprovecha la tecnología para una experiencia de adoración más profunda

    Aprovecha la tecnología para una experiencia de adoración más profunda

    Cómo Microsoft cambiará el juego con la Xbox Series X sin disco

    Cómo Microsoft cambiará el juego con la Xbox Series X sin disco

    Los smartwatch: ¿La nueva tendencia en tecnología?

    Los smartwatch: ¿La nueva tendencia en tecnología?

    Las tecnologías de Linux, Windows y Android se unen en OpenKylin 1.0

    Las tecnologías de Linux, Windows y Android se unen en OpenKylin 1.0

  • Estilo de vida
    1. Entrenamiento
    2. Maquillaje
    3. Dieta
    4. Moda
    5. Trucos y tips
    6. Ver todo
    Desarrolla un cuerpo fuerte y saludable

    Desarrolla un cuerpo fuerte y saludable

    ¿Qué es la forma física?

    ¿Qué es la forma física?

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Mejora los resultados de tu entrenamiento de estabilidad y fuerza

    Consejos para maximizar las caminatas diarias

    Consejos para maximizar las caminatas diarias

    Consejos para aplicar pestañas postizas

    Consejos para aplicar pestañas postizas

    ¿Por qué es importante preparar la piel antes de maquillarla?

    ¿Por qué es importante preparar la piel antes de maquillarla?

    La nutrición y un cabello saludable

    La nutrición y un cabello saludable

    Consejos para una piel perfecta este invierno

    Consejos para una piel perfecta este invierno

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Cosas que le pasan a tu cuerpo cuando comes salmón todos los días

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteínas pueden ayudar a mejorar sus hábitos alimenticios

    Batidos de proteinas - Una guía para principiantes

    Batidos de proteinas - Una guía para principiantes

    Recetas de batidos Herbalife

    Recetas de batidos Herbalife

    Inspiración de traje de otoño

    Inspiración de traje de otoño

    La dura verdad sobre las modelos de talla grande

    La dura verdad sobre las modelos de talla grande

    Razones por las que las marcas de moda de lujo son tan caras

    Razones por las que las marcas de moda de lujo son tan caras

    Cuales son las mejores frutas para adelgazar

    Cuales son las mejores frutas para adelgazar

    Como enseñar a leer y a escribir

    Como enseñar a leer y a escribir

    Como generar cuentas premium Disneyplus

    Como generar cuentas premium Disneyplus

    Calcular porcentajes con la Calculadora de Windows 10

    Calcular porcentajes con la Calculadora de Windows 10

    Cómo conectar un televisor a un ordenador a través de Wi-Fi

    Cómo conectar un televisor a un ordenador a través de Wi-Fi

    ¿Por qué es importante preparar la piel antes de maquillarla?

    ¿Por qué es importante preparar la piel antes de maquillarla?

    Consejos de belleza para lucir fresca en el verano

    Consejos de belleza para lucir fresca en el verano

    Bricolaje para la decoración del hogar

    Bricolaje para la decoración del hogar

    Top 10 de posturas de yoga

    Top 10 de posturas de yoga

  • Marketing
    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Sirven de algo los diseñadores Web?… ¿y los redactores de contenido?

    ¿Qué es un Link Dofollow?

    ¿Qué es un Link Dofollow?

    ¿Qué es Nofollow?

    ¿Qué es Nofollow?

    ¿Qué es el remarketing?

    ¿Qué es el remarketing?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

    ¿Qué es el posicionamiento web (SEO) y lo necesito para mi sitio web?

  • Juegos
    Para qué se pueden usar las Gafas VR PS4

    Para qué se pueden usar las Gafas VR PS4

    Colaboración entre Sony INZONE y EXCEL Esports

    Colaboración entre Sony INZONE y EXCEL Esports

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    La nueva generación de realidad virtual de PlayStation®VR2 y PlayStation®5

    Sony prohíbe cuatro juegos de terceros en Xbox

    Sony prohíbe cuatro juegos de terceros en Xbox

    Prepárate para el futuro: Project Trinity llega a finales de 2024

    Prepárate para el futuro: Project Trinity llega a finales de 2024

  • Herramientas

¡Bienvenido de nuevo!

Inicie sesión o Regístrate ahora

VK

o con Email

¿Has olvidado tu contraseña?
Búsqueda extendida

Escriba arriba y presione Enter para buscar.


Tutoriales En Linea » Diseño Web » Cómo usar iconos basado en fuentes tipográficas?

Cómo usar iconos basado en fuentes tipográficas?


omegayalfa Por omegayalfa En: Diseño Web, @font-face, WebSite, webmasters, Noticias, Tutorial 0 Diciembre 04, 2019

5.7К
VISTO
Twitter Facebook Pinterest VKontakte LinkedIn Tumblr WhatsApp Email
Compartir
Facebook Twitter Pinterest LinkedIn Tumblr WhatsApp VKontakte

Cómo usar iconos basado en fuentes tipográficas?

Es claro que existe una nueva tendencia en internet, y la podemos ver por el uso de vectores en todos lados, uno de esos vectores son los iconos minimalistas. Esta vez veremos como hacer uso de iconos basados en fuentes tipográficas (sí, fuentes tipográficas).

Si bien, cuando se trata de vectores a uno se le viene a la mente el uso de svg. Sin embargo, existe otra forma de usar vectores cuando se trata de iconos y son los iconos basados en fuentes tipográficas. Veamos.


Iconos basados en fuentes tipográficas 


Una fuente tipográfica por defecto es un vector, con la ventaja de que son mucho mas eficientes que los svg. Ahora, cuando uno hace uso de fuentes personalizadas necesita tener esos archivos que contengan la fuente tipográfica, pasa lo mismo con los iconos. Existen paginas que nos proporciona fuentes tipográficas (como fontsquirrel) y también existen paginas que nos proporcionan iconos basados en fuentes tipográficas. Veremos el ejemplo de icomoon.


Icomoon es uno de los mas famosos en proporcionar estas cosas. Vamos pues, a icomoon.io/app/

Para crear una fuente personalizada basta con seleccionar los iconos que queramos añadir a nuestra fuente personalizada.

Cuando terminemos de seleccionar los iconos nos vamos a "Generar Fuente"

Cómo usar iconos basado en fuentes tipográficas?

Notemos que cada icono que seleccionamos tiene un código en la parte de abajo. Este es el código que vamos a necesitar para saber de que icono estamos hablando.

Cómo usar iconos basado en fuentes tipográficas?

Obviamente los códigos varían dependiendo de que iconos hallas seleccionado, En mi caso para el pencil2 es el e900; para camara es el e901; y para micrófono es el e902. Teniendo en cuenta esto, podemos pasar a descargarlo.



Al descargarlo y descomprimirlo, lo abrimos. Notemos que existen varios archivos y carpetas, pero solo los que interesan son la carpeta de fuentes (fonts) y los estilos (style.css). Así que  copiaremos la carpeta fonts a nuestro proyecto, los estilos no los copiamos, solo lo abrimos en un editor de código. Solo necesitamos todo el código css que encapsule la propiedad css3 @font-face.

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?wkjifi');
    src:    url('fonts/icomoon.eot?wkjifi#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?wkjifi') format('truetype'),
        url('fonts/icomoon.woff?wkjifi') format('woff'),
        url('fonts/icomoon.svg?wkjifi#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

Todo esto lo copiamos un en nuestros estilos css, y si queremos podemos cambiar el nombre de la fuente (el font-family). Una cosa que hay que mirar es que las rutas expresadas en el código de arriba deberán de ser las que corresponden en nuestro proyecto. o mirar el demo que nos proporcionan.

Ahora escribamos un poco de html para expresar esos iconos

<div id="ico1"></div>
<div id="ico2"></div>
<div id="ico3"></div>

Solo son 3 divs con las id: ico1, ico2, ico3.


Para añadir un icono con css necesitamos escribirlo con la propiedad css content, que si recordamos solo se puede usar con los selectores ::before o ::after. Entonces necesitamos escribir mínimo dos cosas, la familia de fuentes (font-family, que en este caso por defecto es icomoon, pero si lo cambiaste coloca el nuevo nombre), y el código del icono que queremos añadir (recordemos: para el pencil2 es el e900; para camara es el e901; y para microfono es el e902).

#ico1:before{
    font-family: "icomoon";
    content: "e900";
}
#ico2:before{
    font-family: "icomoon";
    content: "e901";
}
#ico3:before{
    font-family: "icomoon";
    content: "e902";
}

La diagonal invertida en la propiedad content para el caso de icomoon significa que lo siguiente es un código y no un texto.


Mínimo con estas propiedades tendremos visible el icono correspondiente.

La ventaja de usar iconos basados en fuentes tipográficas, es que son tratadas como tal, o sea, se le puede poner un color, un subrayado, un tamaño, en fin todo lo que se le puede poner con css a un texto.


Explorando en icomoon/app/ te darás cuenta de que existen mas opción para insertar los iconos que escojas. Pero personalmente esta es una de las mejores formas.

Como había dicho antes, existen varias paginas que nos permiten generar nuestros propios iconos basados en fuentes tipográficas. Por ejemplo, también tenemos a:


  • Glyphter
  • Fontastic, solo que en esta pagina necesitamos registrarnos con nuestro correo
  • Font Awesome


Estas paginas también hacen algo parecido, pero se mi hace mas un poco mas fácil con icomoon. Mira el resultado 

Síguenos en Síguenos en Google News
  • 100
  • 1
  • 2
  • 3
  • 4
  • 5
Articulo anterior Guía rápida de fuentes web a...
Articulo siguiente Las Expresiones Regulares En p...
omegayalfa
omegayalfa
  • Website
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • Instagram

Sobre mi: ¡Aprende los trucos de tutoriales online y cursos gratis con Tutoriales En Linea! Con manuales paso a paso para desarrollar tu conocimiento, Tutoriales En Linea te ayudará a mejorar tus habilidades y lograr tus metas.
Un tutorial está diseñado con pasos secuenciales que aumentan gradualmente el entendimiento. Por lo tanto, es importante que se sigan los pasos en su orden lógico para que el usuario comprenda todos los elementos. Para optimizar los resultados, se recomienda seguir de forma profesional las instrucciones del tutorial.

Artículos Relacionados


Vídeo y audio - HTML5

Vídeo y audio - HTML5

Diseño web adaptativo

Diseño web adaptativo

Control de la tabulacion entre campos de un formulario

Control de la tabulacion entre campos de un formulario


Comentarios



Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!

Destacados

Como podemos conseguir proxies

Como podemos conseguir proxies

Jun 21 7 562
Herramienta de analisis de tus problemas de SEO

Herramienta de analisis de tus problemas de SEO

Mayo 18 99 279
Historia de los sistemas operativos

Historia de los sistemas operativos

Mayo 16 23 139
Cómo crear un USB de arranque para instalar Windows 10 y 11

Cómo crear un USB de arranque para instalar Windows 10 y 11

Jul 07 116 579

Lo mas leidos

Herramientas SEO para posicionamiento de nuestra web 2023

Herramientas SEO para posicionamiento de nuestra web 2023

Por administrador 27-09-22
Las 7 mejores páginas para descargar películas en .torrent en español

Las 7 mejores páginas para descargar películas en .torrent en español

Por administrador 05-11-21
Anunciate Aqui

Anunciate Aqui

Por Tutoriales En Linea 21-06-23

Etiquetas

tipográficasFontsIconosFuenteTutoriales En LineaArticulosPostNoticiasWebsiteDiseñoWebDiseñadores WebDiseñadoresicomoonIconos SocialesTutorialesfont-face





Sobre nosotros

Tutoriales En Linea

¡Bienvenidos a Tutoriales En Línea, el sitio web perfecto para encontrar todas las herramientas necesarias para mejorar tus habilidades de forma gratuita! En Tutoriales En Linea se encuentran tutoriales, cursos online y aprendizaje de calidad, muy útiles para desarrollar tus capacidades... Leer mas...

Tiene una pregunta? Contactar...

Enlaces

  • Sobre nosotros
  • Ultimos tutoriales
  • Publicar tutorial
  • Ver mas temas
  • Ultimos comentarios
  • ¿Preguntas Frecuentes?
  • Derechos de autor
  • Politica de cookies
  • DMCA
  • Nuestro equipo
  • Normas

Herramientas online

  • Buscador de recetas
  • Prueba de diseño web
  • Codificar en binarios, hexadecimales...
  • Cual es mi IP
  • Test de velocidad
  • Editor HTML
  • Test de escritura
  • Test de nutricion
  • Descargar Videos
  • Generador de datos estructurados

Recursos

  • Analisis de tus problemas de SEO
  • Herramientas SEO
  • Generar palabras claves
  • Referencia de CSS3
  • Convertir HTML a XML
  • Acortador de URL
  • Selector de colores
  • Contador de palabras
  • Comprimir imagenes
  • Conversor a URI de datos
  • Suscribirse
Disponible en Google Play - Google Play y el logotipo de Google Play son marcas comerciales de Google LLC.
Facebook Twitter Instagram Pinterest Linkedin Youtube
  • Anunciarse
  • Socios externos
  • Política de privacidad
  • Términos y Condiciones
  • Sobre nosotros
  • Contactar
© Tutoriales En Linea. Reservados todos los derechos, queda prohibida la reproducción parcial o total sin previa autorización.