Manuales Joomla

Iconos de fuente IcoMoon en nuestros artículos

(Lo puedes leer en: 2 - 3 minutos)

por .

Una de las cosas que más me gustan de Joomla! 3 son los iconos de fuente IcoMoon que permiten mostrar fácilmente estos iconos tan bonitos en nuestro contenido. Pero a pesar de venir de serie con estos iconos, el editor predeterminado de Joomla! TinyMCE elimina estos iconos de nuestro contenido y la cosa no mejora si usamos el editor JCE. Veamos cómo hacer para poder usar estos iconos sin problemas ;).

 Para incluir los iconos de IcoMoon lo habitual es utilizar el siguiente código:

<i class="icon-checkmark"></i>

Lo cual nos mostrará el icono de correcto en nuestro texto. El problema es que si intentamos añadir este código en la parte de "código fuente" del mismo, veremos como una y otra vez TinyMCE lo elimina.

¿Por qué el editor de Joomla! elimina estos iconos fuente?

En realidad esto tan molesto es una característica de seguridad y limpieza del editor de textos que filtra el código potencialmente peligroso y obsoleto que algún usuario quiera meter en los artículos. En este caso concreto la etiqueta i no es peligrosa, pero sí quedó obsoleta con XHTML por lo que TinyMCE no la contempla como válida y la filtra.

¿Cómo hacer que el editor de Joomla! no elimine los iconos fuente?

Para evitar que TinyMCE elimine estos iconos, tendremos que configurar el plugin y añadir este element como un elemento válido. Para ello nos iremos a nuestro Gestor de plugins y buscaremos el plugin Editor - TinyMCE (recuerda que es muy fácil filtrar por grupo y que este plugin pertenece al grupo de Editor) y una vez dentro buscaremos el parámetro Elementos válidos extendidos y le asignaremos el valor i[*] .

¿Cómo hacer que el editor JCE no elimine los iconos fuente?

Si no usas el editor por defecto, sino el editor JCE, también tendrás el mismo problema y la solución también pasa por indicarle al editor que no debe filtrar estos elementos. Para ello tendrás que buscar en el menú de Componentes la entrada para JCE Editor. Allí buscaremos los Perfiles del Editor y pincharemos para editar el que estemos utilizando. Si no hemos hecho modificaciones será el perfil predeterminado (Default), pincharemos para editarlo y nos iremos a la pestaña de Parámetros del editor. En este apartado nos fijaremos en la sección de Avanzado y en el parámetro de Elementos Extendidos añadiremos el código: +i[*].

 

Con esto podremos usar fácilmente los iconos fuente de IcoMoon o cualquier otro proveedor en nuestro contenido Joomla!. Para acabar os dejo un enlace a la página de demostración de IcoMoon con todos los iconos que podéis usar en vuestro sitio Joomla!:

https://icomoon.io/#preview-free

Etiquetas: Iconos fuente, TinyMCE, JCE, Iconos, Editor, Trucos

Imprimir