2
![Mejor respuesta del mensaje [TUTORIAL] Añadir Font Awesome a tu Foro](images/thx/star.png)
Añadir Font Awesome a tu Foro
Últimamente se ha puesto muy de moda el empleo de esta fuente en muchos themes liberados de MyBB, y en efecto es un gran recurso puesto que provee bastante utilidad y elegancia al momento de mostrar contenido en diferentes secciones del foro, ahorrándonos el trabajo y la carga de mostrar una imagen, y lo que es peor aún para algunos, alinear la imagen con el texto.
La font awesome es un trabajo desarrollado por Bootstrap, quienes no tengan idea de esto les recomiendo leer un poco acerca de ello en internet, si son más curiosos podrían mejorar notablemente sus habilidades para el diseño web. Esta fuente es muy empleada en diferentes sitios web para mostrar íconos elegantes representativos de acciones, ideas, entidades, señales, etc.
Ok vayamos al punto del post, integrar esta fuente de la mejor manera en nuestros foros MyBB, pues sigan los siguientes pasos.
1. Primero deberán descargar la fuente desde la página oficial, ya que es recomendable siempre tener la última versión para un uso óptimo y mayor variedades de íconos.
Registrate o inicia tu sesión para ver este contenido
2. Una vez descargado, descomprimimos y entramos a la carpeta contenedora, encontraremos 4 carpetas de las cuales, para integrar esta fuente a nuestros foros, solo nos bastará con 2 que son las siguientes:
![[Imagen: 5ATeNaG.png]](http://i.imgur.com/5ATeNaG.png)
3. En nuestro FTP, creamos una carpeta de recursos, pueden ponerle el nombre que deseen, para el tutorial ejemplificaré con el nombre de una carpeta llamada "sources" en el root principal de mi FTP.
Entonces dentro de la carpeta sources subimos las 2 carpetas señaladas en la imagen anterior: css y fonts.
4. Ahora vamos a nuestro ACP >> Estilos y Plantillas >> Plantillas >> (Selecciona tu theme) >> Plantillas sin grupo >> headerinclude
Y agregamos la siguiente línea de código (les aconsejo que lo pongan entre el grupo de etiquetas link que tienen en su plantilla):
Código: ( Seleccionar Todo )
<link rel="stylesheet" type="text/css" href="sources/css/font-awesome.min.css" />Y guardamos los cambios.
5. Ahora nos vamos a nuestro ACP >> Estilos y Plantillas >> Estilos >> (Selecciona tu theme) >> global.css >> Editar hoja de estilo: modo avanzado
Aquí vamos a añadir el siguiente código en la primera línea, es decir, lo que vamos añadir tiene que estar ANTES de cualquier código ya escrito en su global.css
Código: ( Seleccionar Todo )
@font-face {
font-family: 'FontAwesome';
src: url(sources/fonts/fontawesome-webfont.eot);
src: url(sources/fonts/fontawesome-webfont.eot?#iefix) format('embedded-opentype'),
url(sources/fonts/fontawesome-webfont.woff) format('woff'),
url(sources/fonts/fontawesome-webfont.ttf) format('truetype'),
url(sources/fonts/fontawesome-webfont.svg#FontAwesome) format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
}Y guardan los cambios.
Ahora ya podrán usar esta dichosa fuente en sus foros, podrán usar los íconos que ustedes quieran dependiendo de sus necesidades, para saber qué variedades tienen visiten el listado de íconos que trae este fuente: Registrate o inicia tu sesión para ver este contenido
Allí les darán el código para cada ícono que deseen emplear, cabe mencionar que esto lo hago para un modelo de carpeta llamada "sources" que creé en mi directorio principal de mi FTP; si ustedes deciden subirlo a otra carpeta con diferentes nombres, solo linkeen bien la dirección de en donde se encontrarán los archivos para no tener problemas (:
Si tienen dudas al respecto, dejar sus respectivos comentarios aquí, hasta luego.
Última modificación: 30 March 2014, 06:49 por Jean Pierre.
