libreman
1
Iota
Verificación en dos pasos activada
Suscripción a IA
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:
Inserir CODE, HTML ou 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:
Inserir CODE, HTML ou 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
Inserir CODE, HTML ou 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í:
Inserir CODE, HTML ou 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ú:
Inserir CODE, HTML ou 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:
Inserir CODE, HTML ou 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:
Inserir CODE, HTML ou 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
Inserir CODE, HTML ou 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 edição:
