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.
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/
gracias man
Genial, gracias a ti ! :D
[…] Como utilizar iconos para sitio web mediante fuentes y CSS: https://www.falconmasters.com/tutoriales/como-utilizar-iconos-sitio-web-css/ […]
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.
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.
En que buscador lograste bajarlo??, lo baje en chrome y firefox, y sigue saliendo el cuadro blanco :s
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.
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.
[…] Independientemente del elemento que hayamos decidido utilizar vamos a agregarle 2 clases, 1 de estas clases es la que vamos a trabajar con css, yo en este caso la he llamado .ir-arriba y la otra clase es la que usaremos para agregar el icono. Si tu aun no sabes como agregar iconos mediante fuentes y clases aquí tienes un tutorial en el cual enseño como utilizar iconos, como los que usaremos en este tutorial. Tutorial Iconos: https://www.falconmasters.com/tutoriales/como-utilizar-iconos-sitio-web-css/ […]
Gracias :) Carlos por los vídeos de los iconos me sirvió mucho y aprendí a manejar mas los css !
[…] Como utilizar iconos para sitio web mediante fuentes y CSS […]
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.
[…] Como utilizar iconos para sitio web mediante fuentes y CSS […]
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 ????
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?
Amigo Falcon, excelente tus tutoriales, ahora bien como le hago para que los iconos queden dentro de una caja de input de un formulario ?,
Sos un capo loco, siempreee me sirven tus tutoriales!
Excelente!! Gracias Carlos
Heeey, muchísimas gracias, eres el mejor, cásate conmigo plis <3, es tan genial lo que haces
ok casemos
Hola, gracias por tus tutoriales, tengo el mismo problema que Luis Hernandez, no se ven las imagenes sino un cuadro. Alguien sabe por que?
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.
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?
Hola que tal, a mi no me sale la carpeta de fonsts, solamente en imagenes
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?..
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
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??
Solo me sale un cuadro en blanco :S
A mi me pasa lo mismo, ya lo pudiste resolver ?
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?
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!
Hola haz los mismos pasos pero con el navegador Mozilla, hay casos donde el navegador bloquea el contenido.
si, es cierto. a mi me pasa lo mismo. no me aparece el documento de fonts
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!
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
voy ala pagina dmo para ver los nombre del icon pero no me sale nada ayudame por favor
Genial Falcon, procuraré ponerlo en practica broth
Gracias!!!!!!
y como lo pongo en un input text, para un campo de usuario o de pass
me fue de gran utilidad !!!!
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.
¿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!!
Gracias carlos, muy bien explicado.
Un saludo. :)