Diseño Web y Marketing Digital

Hacemos accesible Internet a las Empresas

Teléfono Fijo 91 881 47 19

91 881 47 19

Horario de Verano
del 15/06 al 15/09
de L a V de 9:00 a 15:00

hablamos de tu proyecto
Viernes, 23 Febrero 2018 09:37

Integrar Font Awesome 5.0.6 en Joomla Destacado

Escrito por 
Valora este artículo
(1 Voto)

En este artículo veremos cómo se integra Font Awesome 5.0.6 en el CMS de Joomla para que podamos utilizar todos los iconos y efectos que podemos aplicar con esta tipografía.

  Paso 1 descarga de archivos necesarios

Antes de nada hay que descargarse al ordenador los archivos correspondientes para integrarlos en Joomla. Los archivos de Font Awesome 5.0.6(última versión a la hora de redactar este artículo) podemos descargarlos desde su página Web. Pulsa en este enlace  

Una vez dentro de la página, veremos la posibilidad de descargar los archivos que ofrecen para su uso gratuito o para la versión pro. En nuestro caso descargaremos la versión Free y para ello pulsaremos el botón que dice Download Free. Si quieres descargarlo directamente, pulsa en este enlace Download Free  

  Paso 2 subida al servidor de los archivos necesarios

Los archivos necesarios están comprimidos en un archivo con extensión ZIP, con lo cual tendremos que descomprimirlo. Una vez descomprimido nos centraremos en una de las carpetas llamada web-fonts-with-css. Dentro de esa carpeta crearemos una nueva llamada 'fontawesome_web' y pondremos dentro de ésta carpeta recien creada, las carpetas 'less', 'scss', 'webfonts' y 'css' pero de la carpeta 'css' únicamente cogeremos el archivo 'fontawesome-all.min.css', los demás archivos de la carpeta css no los incluiremos.

Una vez realizado el proceso anterior, subiremos la carpeta 'fontawesome_web' al servidor donde tenemos alojado el Joomla y exactamente la pondremos dentro de la carpeta 'media'

  Paso 3 código de llamada al css

Ahora iremos a la parte administra de Joomla y pondremos en el <head> la siguiente línea de código que está escrita entre las llaves{} de abajo y necesaria para que funcione correctamente. Sin esta línea no podremos terminar de integrar Font Awesome en la web.

{<link rel="stylesheet" href="/media/fontawesome_web/css/fontawesome-all.min.css" type="text/css" />}

Existen algunos plugins que permiten agregar código dentro de la cabecera <head> de la web. Por ejemplo, podéis utilizar System - Custom HEAD que es gratuito y funciona muy bien. Una vez puesta esta líne ya podemos utilizar los iconos que queramos, como estos de abajo:


Muy importante, si tenéis la web cacheada, tenéis que desactivar la caché y limpiarla para que funcione la primera vez, una vez funcione todo podéis volver a cachear la web.

El código Html que tenemos que poner para que se muestren los iconos, por ejemplo el icono de descargar, es el siguiente:<i class="fas fa-download"></i> y que mostraría éste icono:

Se pueden ver los iconos que podemos utilizar desde este enlace Iconos de Font Awesome y como se puede ver en esa lista, todos los iconos tienen un nombre que servirá para componer la clase del icono a llamar. En el ejemplo del icono de desdacrgar que he puesto arriba, el nombre en la lista es 'download' sin embargo, el nombre de la clase a llamar será ' fas fa-NOMBRE_DEL_ICONO ', como vemos en el ejemplo de arriba.

Poner los Iconos sin necesidad de escribir en el código html

Estos iconos tal como los estamos poniendo, solamente pueden ponerse desde dentro del código y mediante codigo Html como hemos visto, pero hay una manera más amigable de hacerlo desde el mismo editor, sin necesidad de tocar el código, y es mediante Macros. Para ello tenemos que instalar el componente RokCandy que es gratuito. Una vez instalado accedemos al mísmo desde Componentes > RokCandy > Macros

Vemos una lista de algunas Macros ya creadas, pero vamos a crear la nuestra para poner los iconos en cualquier parte.
Pulsaremos el botón Nuevo y nos mostrará unos campos vacios que rellenaremos de la siguiente manera:

  • En el campo Macro escribiremos: ['ico']{text}['/ico'] pero sin las comillas simples
  • En al campo Html escribiremos: <i class="{text}"></i>
  • En Categoría seleccionaremos: Basic

Una vez creada esta Macro, emplearemos este código ['ico']fas fa-hand-peace['/ico'] siempre que queramos poner un icono entre nuestro texto (quitando las comillas simples de la palabra ico).

Por ejemplo

 

 

Comparte este Artículo en tus Redes Sociales



Guía de Microempresas
¿Aún no estás en la Guía de Microempresas?
¿Quieres saber si eres una Microempresa?
La Guía definitiva para encontrar lo que necesitas.
¡Date de Alta Gratuitamente!

banner-diseño-web


 

Visto 500 veces Modificado por última vez en Viernes, 23 Febrero 2018 14:10

Artículos relacionados (por etiqueta)

  • Datos Estructurados Schema para Joomla con JCE

    En este artículo mostramos a los usuarios de Joomla cómo etiquetar sus contenidos para crear una estructura de Microdatos basados en el estandar creado por Schema.org y así facilitar la clasificación en la indexación de los contenidos en los buscadores.

  • Qué es una Página Web Autogestionable

    Diseño Web

    Cuando usamos nuestro Ordenador, Tablet o Smartphone, estamos acostumbrados a crear y modificar documentos de diversos tipos e incluso a publicar en nuestras redes sociales.

  • ¿Qué es una Página de Aterrizaje o Landing Page?

    Una landing page, también conocida como página de aterrizaje, es una página web diseñada específicamente para convertir visitantes en leads. Antes de continuar deberíamos aclarar lo que entendemos por Leads.

  • ¿Por qué debo actualizar mi Página Web?

    Debes tener muy claro que la web es la imagen de tu negocio que muchos consumidores, usuarios o clientes, conocen de tu empresa. Al igual que entramos en un establecimiento porque nos gusta el espacio o nos llama la atención, así como las empresas se molestan en tener oficinas cómodas y con buenos servicios para sus clientes y trabajadores. Las páginas web son el reclamo y principal foco de atención para un cliente que decide entrar en ella y realizar una compra de un producto, servicio o consulta. La web habla mucho de nuestra empresa por lo que debe estar a la altura y responder a las expectativas del usuario. Lo contrario puede ser nefasto y puede hacernos perder a un cliente.

  • Qué es el SEO y por qué es necesario para tu Web

    SEO (Search Engine Optimization) - que en español podemos traducir como optimización para motores de búsqueda- es la práctica de utilizar una serie de técnicas, incluidas la reescritura del código html, la edición de contenidos, la navegación en el site, campañas de enlaces y más acciones, con el fin de mejorar la posición de una web en los resultados de los buscadores para unos términos de búsqueda concretos. Sencillo, necesitamos que nuestra web sea encontrada para que sea útil.

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.

¡Atención! Este sitio utiliza cookies.

Si no cambia la configuración de su navegador, usted acepta su uso. Saber más Acepto

logo cabecera web
EIE (Espacio de Iniciativas Empresariales)
Parque Empresarial La Garena
C/Blas Cabrera, 23
Alcalá de Henares - Madrid
Teléfono: 91 881 47 19
Mapa Localización 

sello ssl comodo 90

telefono web
Teléfono de atención al cliente:

Horario de Verano: del 15/06 al 15/09
de Lunes a Viernes de 9:00 a 15:00

Consultoría de Internet | Diseño Web | Mapa del Sitio

Solución Individual ® y su Logotipo son
Nombre Comercial y Marca Registrada.
 © Reservados Derechos de Autor 2010 

Microempresa asociada a AEMME
logo AEMME P

Te puede interesar: Microempresas | Despachos Profesionales | PYMES

Servicios: Contratación de Dominios | Contratación de Certificados SSL | Hosting Web en España

Partners: InfodemiBoda.es | GuíadeMicroempresas.es


acceso candado   social facebook   social google   social twitter   social flickr   social pixabay   social pinterest   social youtube   social guiamicroempresas 


 Los precios indicados en esta web NO incluyen el IVA

Somos un sitio de confianza y nos presentamos con total 

Transparencia y Legalidad.

Servicio de CalidadServicio de CompromisoServicio de Garantía