Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock

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.
Para utilizar todas las Fuentes Iconos puedes ver el siguiente enlace

¿Como Utilizarlo?
Solo debes de añadir una sola etiqueta <i>, class y el nombre del icono "Fuente"

Ejemplo

Carita Feliz
<i class="icon-smile"></i> Carita Feliz
Icono de Camara
<i class="icon-camera-retro"></i> Icono de Camara
¿Se ven muy chicos los iconos?  Podemos aumentar el tamaño de la siguiente manera

Ejemplo

Normal
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 Normal
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
  
También podemos agregar nuestros Iconos de fuente en un botón

Ejemplo


Comentario
Información
Eliminar
Configurar
<span class="engraved"><a class="red" href="URL"> <i class="icon-comment"></i> Comment</a></span>
<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>
Ustedes pueden jugar con los Iconos de Fuente como ustedes quieran y sean necesarios  
- - 7 Comentarios
Tag

Comentarios (7)

  1. 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!

    ResponderEliminar
  2. @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

    Respecto 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

    ResponderEliminar
  3. Perdona 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
  4. @Esteban Hernandez Dime si te sirve el tutorial siguiéndolo paso a paso. Espero tu comentario

    ResponderEliminar
:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar