En este tutorial veremos como agregar Icono Fuentes para blogger, hechos únicamente con Fonts, Estos iconos no son fotos, si no son creadas con CSS para una mejor carga para nuestro blog.
Para comenzar solo tienes seguir estos simples pasos:
- Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
- Paso 2: Buscamos la siguiente linea (Ctrol + F)
<head>
- Paso 3: Justo por debajo de <head> pegamos la siguiente line
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" rel="stylesheet"/>
- Paso 4: Guardamos los cambios realizados en la plantilla.
¿Como Utilizarlo?
Solo debes de añadir una sola etiqueta <i>, class y el nombre del icono "Fuente"
Ejemplo
<i class="icon-smile"></i> Carita Feliz
<i class="icon-camera-retro"></i> Icono de Camara
Ejemplo
2x Veses mas grande
3x Veses mas grande
4x Veses mas grande
5x Veses mas grande
<i class="icon-smile"></i> Normal
<i class="icon-smile icon-large"></i> 2x Veses mas grande
<i class="icon-smile icon-2x"></i> 3x Veses mas grande
<i class="icon-smile icon-3x"></i> 4x Veses mas grande
<i class="icon-smile icon-4x"></i> 5x Veses mas grande
También podemos girar los iconos a nuestra conveniencia.
Ejemplo
Icono girado 90 grados
Icono girado 180 grados
Icono girado 270 grados
Icono horizontal
Icono vertical
<i class="icon-home"></i>Icono Normal
<i class="icon-home icon-rotate-90"></i> Icono girado 90 grados
<i class="icon-home icon-rotate-180"></i>Icono girado 180 grados
<i class="icon-home icon-rotate-270"></i> Icono girado 270 grados
<i class="icon-home icon-flip-horizontal"></i>Icono horizontal
<i class="icon-home icon-flip-vertical"></i>Icono vertical
Ejemplo
Información
Eliminar
Configurar
<span class="engraved"><a class="red" href="URL"> <i class="icon-comment"></i> Comment</a></span>Ustedes pueden jugar con los Iconos de Fuente como ustedes quieran y sean necesarios
<span class="engraved"><a class="orange" href="URL"> <i class="icon-info-sign"></i> Info</a></span>
<span class="engraved"><a class="blue" href="URL"> <i class="icon-trash icon-large"></i> Delete</a></span>
<span class="engraved"><a class="green" href="URL"> <i class="icon-cog"></i> Settings</a></span></div>
Hola Fernando, muy bueno esto de los iconos fuentes, me vino barbaro, ya lo implementé y quedó buenisimo. Lo único que no me salen son los botones por lo menos como se ven acá. Y otra cosa como hago para subir el codigo css en mi dropbox para poder subirlo a blogger y asegurarme del servicio? Espero me puedas ayudar. Gracias y muy bueno el blog!
ResponderEliminarHola, me podés contestar?
ResponderEliminar@Pal MunDisculpa la demora en mi comentario, respecto a los botones con iconos entra al siguiente tutorial y sigues los pasos para agregar botones en tu plantilla HTML Como crear hermosos Botones con CSS3 para Blogger
ResponderEliminarRespecto a como subir el css a tu dropbox habré este enlace en un pestaña nueva CODIGO CSS clic derecho guardar, entra a tu dropbox y vuelvelo a subirlo
Solo tienes que entrar a tu plantilla y pegar justo debajo de
<head>
la siguiente linea
<link href="//URL DE TU DROPBOX" rel="stylesheet"/>
Espero que me hallas entendido y nuevamente perdón por la demora
No sirven para firefox :(
ResponderEliminar@Esteban HernandezOe ya me sirven en firefox :)
ResponderEliminarPerdona la molestia pero mira http://manejatublog.blogspot.com no me sirven los icnos salen unos cuadrados yo subi la hoja de estilo de cascada a dropbox ¿sera ese el problema?
ResponderEliminar@Esteban Hernandez Dime si te sirve el tutorial siguiéndolo paso a paso. Espero tu comentario
ResponderEliminar