Aprende a usar iconos personalizados en tu sitio web mediante fuentes y CSS optimizando la velocidad de tu sitio web y dándole un toque personal bastante genial.

Share on Pinterest
Comparte con tus amigos










Enviar

Una de las tendencias actuales dentro del diseño web es el diseño plano o lo que se le conoce como flat design, el cual consiste en hacer sitios basados en paletas de colores flat e incluyendo iconos que mejoran la experiencia de usuario dentro de una web.

Es por eso que hoy les traigo un tutorial sobre como utilizar iconos en nuestro sitio web mediante CSS, esto gracias a las llamadas WebFonts. Asi es, mediante una fuente agregaremos iconos a nuestras paginas web, el truco consiste en agregar una webfont a nuestro sitio pero en vez de tener letras contiene iconos, a esta combinación se le conoce como Icon Webfonts y yo te voy a enseñar como utilizar esta técnica tan popular.

Como utilizar iconos para sitio web mediante fuentes y CSS

Link a Icomoon: http://icomoon.io/

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Fran Lemu

    gracias man

  • Pingback: Menú de navegación desplegable con Animaciones CSS 3()

  • Gill Ton Morte

    Hola Carlos Arturo. Tengo una duda acerca de las fuentes. Cuando descargo los archivos me aparecen ‘vacios’ es decir; todos están en blanco: ‘.eot’, ‘.svg’, ‘.ttf’ y ‘.woff’ y de la misma manera, cuando hago la relación hacia los iconos, no me aparecen en mis enlaces. Agradezco tu atención.

    • Gill Ton Morte

      Hola nuevamente Carlos Arturo. Te notifico que ya no tengo problema con lo anterior. El detalle es que descargué los archivos con ‘Google Chrome’ y de alguna manera bloqueó el contenido. Lo dejo como referencia. Gracias y saludos.

      • Verónika García

        En que buscador lograste bajarlo??, lo baje en chrome y firefox, y sigue saliendo el cuadro blanco :s

        • Gill Ton Morte

          Disculpa Verónika García por no haber respondido ántes. Si aún te sirve, no es el navegador con el que descargues el paquete de fuentes; sino los archivos que copias a la carpeta de ‘fonts’.
          Saludos.

          • PERE OLIVARES

            Buenas tardes, a mí me pasa lo mismo de las fuentes, he encontrado una solución fuera de éste foro, no nombrar la carpeta de fuentes como “fonts”, no la reconocen los servidores, le he puesto “iconos” y perfecto.

  • Pingback: Como hacer botón de ir arriba con HTML, CSS y Javascript()

  • Nick Chilca Principe

    Gracias :) Carlos por los vídeos de los iconos me sirvió mucho y aprendí a manejar mas los css !

  • Pingback: Como hacer una Barra Social (vertical) con HTML y CSS3()

  • EvilCloud

    Hola Falcon, me han servido de mucho tus tutoriales pero hoy dia tengo un problema, tengo una barra de navegación con iconos, se ven de puta madre en el Google Chrome pero no carga los iconos en firefox, ¿Sabes a que se debe? He googleado demas y nada. Gracias de antemano.

  • Pingback: Como hacer un menú desplegable y adaptable a dispositivos móviles (Responsive Design)()

  • Fantástico video, muy claro y me ha sido de mucha utilidad. Muchas gracias por compartir tus conocimientos.

  • Hola Amigo Una Pregunta Este Metodo Funciona Con WordPress ????

  • Luis Hernandez de Romero

    Intente crear la linea de codigo que se muestra el el video: h1><span class=" icon icon-home"probando funcion de botones y el boton se muestra como un cuadrado sin color ni nada. Aque se debera?
    ¿Alguien Podria Ayudarme?

  • Juan Carlos Gutierrez Osorio

    Amigo Falcon, excelente tus tutoriales, ahora bien como le hago para que los iconos queden dentro de una caja de input de un formulario ?,

  • Leandro

    Sos un capo loco, siempreee me sirven tus tutoriales!

  • Gabriela Murillo

    Excelente!! Gracias Carlos

  • Gaby Rojano

    Heeey, muchísimas gracias, eres el mejor, cásate conmigo plis <3, es tan genial lo que haces

  • Vanesa

    Hola, gracias por tus tutoriales, tengo el mismo problema que Luis Hernandez, no se ven las imagenes sino un cuadro. Alguien sabe por que?

  • Elizabeth Darski

    Hola agradezco tus tutoriales son muy buenos y completos, tengo un problema parecido a el de Vanesa y Luis Hdz, el cual resolví instalando la fuente, pero al momento de visualizar la pagina en otra computadora o en un dispositivo móvil, no se ven las imágenes de los iconos ( entiendo que esto se debe a que no tienen instalada la fuente por eso no podemos visualizarla), lo que me causa intriga es que se supone que al momento de subir al servidor el html y la hoja de estilos esta ultima ya trae incrustada la fuente, por lo que la “jala” desde ahí y de esta manera debería poder verse en cualquier computadora o dispositivo sin importar que tengan la fuente instalada… pero esto no sucede. Te agradeceria si pudieras ayuadrme con este problema. Gracias :)

    • Si asi es, el objetivo es lograr que los usuarios puedan ver nuestra fuente sin tenerla instalada, es por eso que usamos @font-face. En tu caso el problema lo mas seguro estara en la ruta de las fuentes, revisala bien y sobre todo que la ruta este correcta a la hora de subirla al sitio web.

  • Herman Rojas

    Hola, gracias por los tutoiales, mas que buenos. Pero tengo un inconveniente que no he podido resolver:
    en local todo bien, se ven los iconos y todo, pero al subir al servidor, y aclaro que las rutas siguen iguales, ya que la hoja de estilos esta en la misma carpeta tanto en local como en el server. pero no se ven los icono, solo unos cuadros, he revisado las rutas y no veo el problema, ayuda!!!

  • Hola amigo, una consulta…
    Cómo puedo utilizarlo en Blogger?

  • Erik Serrato H

    Hola que tal, a mi no me sale la carpeta de fonsts, solamente en imagenes

  • S̶t̶e̶v̶e̶n̶ B̶s̶t̶m̶t̶

    Intente crear la linea de codigo que se muestra el el video: h1>probando funcion de botones y el boton se muestra como un cuadrado sin color ni nada. Aque se debera?
    ¿Alguien Podria Ayudarme?..

    • Julian Rodriguez Montilla

      pasa por no ubicar el link del icono en:style.css probablemente este:src:url(‘fonts/icomoon.eot?65fh7l’);
      src:url(‘fonts/icomoon.eot?65fh7l#iefix’) format(‘embedded-opentype’),
      url(‘fonts/icomoon.ttf?65fh7l’) format(‘truetype’),
      url(‘fonts/icomoon.woff?65fh7l’) format(‘woff’),
      url(‘fonts/icomoon.svg?65fh7l#icomoon’) format(‘svg’);
      elimina el fonts/ asi:
      src:url(‘icomoon.eot?65fh7l’);
      src:url(‘icomoon.eot?65fh7l#iefix’) format(‘embedded-opentype’),
      url(‘icomoon.ttf?65fh7l’) format(‘truetype’),
      url(‘icomoon.woff?65fh7l’) format(‘woff’),
      url(‘icomoon.svg?65fh7l#icomoon’) format(‘svg’);
      si no lo haces la referencia quedara como si hubiese otra carpeta llamada fonts dentro de fonts

  • Verónika García

    Hola, he intentado aplicarlos pero no me aparecen, ya revise las rutas y hasta las he puesto exactas (con el html://…. en donde estan los archivos y nada). A que crees que se deba??

    • Verónika García

      Solo me sale un cuadro en blanco :S

      • Javier

        A mi me pasa lo mismo, ya lo pudiste resolver ?

  • Adriana Gonzalez T

    Hola, primero muchisimas gracias por tus tutoriales, son excelentes y me has ayudado mucho, tengo un pequeño problema, los iconos me funcionan bien pero he notado que algunos de ellos no se visualizan cuando veo la pagina a través de mi wampserver, sin embargo si cargo la página desde el icono de navegador que aparece en DreamWeaver si los puedo ver, no se a que se debe este problema, podrías ayudarme?

  • Diego Suarez

    Hola amigo como estas? me encantan todos tus videos y tutoriales. Te hago una pregunta simple. De donde sacaste esa libreria de iconos, el archivo comprimido ese que despues solo colocas la carpeta font y el archivo style al proyecto? He descargado del link ese que nos diste de IcoMoon y he descargado un paquete de iconos que se llama IcoMoon-Free-master.zip y dentro no tiene ninguno de los archivos que colocas en el proyecto del video. Ojala puedas ayudarme en eso. Y sigue con mas videos y tutoriales para aprender cosas nuevas, eres un genio!

    • Abraham

      Hola haz los mismos pasos pero con el navegador Mozilla, hay casos donde el navegador bloquea el contenido.

    • franarauz

      si, es cierto. a mi me pasa lo mismo. no me aparece el documento de fonts

  • master hack

    hola falcon masters, veras quisiera colocar un icino personalizado de mercadolibre este:https://lh4.ggpht.com/2m4sWDlRftntrVr5xcP5pzDkyWI-I7MDS3U9sFycq2djEnljiedkhyrGQerXrhdMA_nFNlREUhFiYGG_7goBdvc=s48 pero no se como agregarlo a los archivos dentro de la carpeta font!

  • ricardo

    no puedo ver los nombres del iconos voy ala pagina del demoq ue viene en la carpeta de descarga epro no me sale nada, ayudame por favor

  • ricardo

    voy ala pagina dmo para ver los nombre del icon pero no me sale nada ayudame por favor

  • Abraham De la Roche

    Genial Falcon, procuraré ponerlo en practica broth

  • Gracias!!!!!!

  • Ariel Garcia

    y como lo pongo en un input text, para un campo de usuario o de pass

  • Marcos Villabasa

    me fue de gran utilidad !!!!

  • Dany

    Carlos, hermano me parece genial el curso que impartistes de Bootstrap. Aprendi infinidad de cossas con el que no sabia que se podian realizar. Tengo un problema y quisiera que pudieras ayudarme. La cuestion es que me gusta mucho html, se algo de css y trabajo con Joomla 3.3.5. resulta que he llegado a la conclusion de que soy mejor codificando que trabajando en jommla desde el backend, y ya he heco casi completo mi sitio desde bootstrap. Necesito saber como implementarlo a Joomla mediante una palntilla o algo asi, como hacer una plantilla para joomla de mi pagina principal por ejemplo. Me urge pues le presto servicios a 67000 usuario en navegacion y correo.

  • Berta FA

    ¿Hay alguna manera de añadir estos iconos dentro de los botones input? Hasta ahora lo tenía en imágenes de background, pero creo que me sería mucho más fácil tenerlos así. He probado de incluir el span dentro del value del botón pero se rompe el código. Espero que me puedas ayudar!!! Saludos!!

  • Jorge Pucheta

    Gracias carlos, muy bien explicado.

    Un saludo. :)


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso