- Desde
- 23 Ago 2011
- Mensajes
- 2.106
Por fín me he decidido a dejaros un tutorial 100% exclusivo para Forobeta.
Buscando themes y mirando códigos me encontre con esta sencilla manera de darles un toque distinto a nuestros menús. Tambíen se puede usar para listas, marcadores sociales, ratings..... lo que tu quieras.
El sistema sirve tanto para blogger, wordpress, php, html....
Comencemos:
Usaremos Font Awesome, the iconic font and CSS toolkit que como bienen a decir en su web
"Awesome Font nos da iconos vectoriales escalables que instantáneamente pueden modificarse para requisitos particulares, tamaño, color, sombra y todo lo que puedas hacerse con el poder del CSS."
Tiene varias formas de implementarlo en nuestros sitios, las cuales podemos verlas en su web,
pero las que vamos ha usar es cualquiera de estas:
1.- (Para Blogger) Introducimos esta línea de codigo dentro del <head> de nuestro sitio:
2.- (Para Wordpress y demas) Descargamos desde la web el directorio completo font-awesome,lo subimos a nuestro server y Introducimos esta línea de codigo dentro del <head> de nuestro sitio:
Tanto para la opción 1 como para la 2 la implementación de los iconos es la misma:
usaremos la etiqueta <i class="codigo del icono"></i> para ponerlos donde queramos
La lista completa de más de 400 iconos se encuentra aquí.
Para una lista lo pondríamos así:
Y para un menú:
Los iconos se pueden rotar añadiendo fa-rotate-grados
fa-rotate-90 - fa-rotate-180 -fa-rotate-270
Ejemplo:
Se les puede hacer flip horizontal o vertical con fa-flip-dirección
Ejemplo:
Se les puede cambiar el tamaño añadiendo fa-lg (33% más), fa-2x, fa-3x, fa-4x, o fa-5x
Estas son algunas de las posibilidades, en la web podéis ver muchas más, así como obtener ayuda si se os presentará algún problema.
Buscando themes y mirando códigos me encontre con esta sencilla manera de darles un toque distinto a nuestros menús. Tambíen se puede usar para listas, marcadores sociales, ratings..... lo que tu quieras.
El sistema sirve tanto para blogger, wordpress, php, html....
Comencemos:
Usaremos Font Awesome, the iconic font and CSS toolkit que como bienen a decir en su web
"Awesome Font nos da iconos vectoriales escalables que instantáneamente pueden modificarse para requisitos particulares, tamaño, color, sombra y todo lo que puedas hacerse con el poder del CSS."
Tiene varias formas de implementarlo en nuestros sitios, las cuales podemos verlas en su web,
pero las que vamos ha usar es cualquiera de estas:
1.- (Para Blogger) Introducimos esta línea de codigo dentro del <head> de nuestro sitio:
Insertar CODE, HTML o PHP:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">2.- (Para Wordpress y demas) Descargamos desde la web el directorio completo font-awesome,lo subimos a nuestro server y Introducimos esta línea de codigo dentro del <head> de nuestro sitio:
Insertar CODE, HTML o PHP:
<link rel="stylesheet" href="/font-awesome/css/font-awesome.min.css">Tanto para la opción 1 como para la 2 la implementación de los iconos es la misma:
usaremos la etiqueta <i class="codigo del icono"></i> para ponerlos donde queramos
Insertar CODE, HTML o PHP:
<i class="fa fa-camera"></i> muestra una camara
<i class="fa fa-envelope"></i> muestra un sobreLa lista completa de más de 400 iconos se encuentra aquí.
Para una lista lo pondríamos así:
Insertar CODE, HTML o PHP:
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home"></i>Inicio</a>
<a class="list-group-item" href="#"><i class="fa fa-book"></i>Forobeta</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil"></i>Aplicaciones</a>
<a class="list-group-item" href="#"><i class="fa fa-cog"></i>Configuración</a>
</div>
Y para un menú:
Insertar CODE, HTML o PHP:
<li>
<a href='url'>
<i class='fa fa-plane'>
</i>
Travel Tips
</a>
</li>Los iconos se pueden rotar añadiendo fa-rotate-grados
fa-rotate-90 - fa-rotate-180 -fa-rotate-270
Ejemplo:
Insertar CODE, HTML o PHP:
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>Se les puede hacer flip horizontal o vertical con fa-flip-dirección
Ejemplo:
Insertar CODE, HTML o PHP:
<i class="fa fa-shield fa-flip-vertical">Se les puede cambiar el tamaño añadiendo fa-lg (33% más), fa-2x, fa-3x, fa-4x, o fa-5x
Insertar CODE, HTML o PHP:
<i class="fa fa-hand-o-right" fa-2x></i>
Estas son algunas de las posibilidades, en la web podéis ver muchas más, así como obtener ayuda si se os presentará algún problema.
Última edición:
