Árbol de páginas

Estás viendo una versión antigua de esta página. Ve a la versión actual.

Comparar con el actual Ver el historial de la página

« Anterior Versión 2 Siguiente »

Aquí se describen los pasos y recomendaciones a seguir para cambiar los iconos de la aplicación desde Font Awesome 4 a Font Awesome 5 Pro.

Actualización del proyecto

Como se describe en Actualización de la aplicación generada por el arquetipo cambios desde el arquetipo 0.0.26, tenemos que actualizar la aplicación y añadir la nueva librería, los pason son:

1.- En el archivo template.xhtml:

Se añade la librería de fontAwesome, parametrizada dependiendo del entorno:

<link rel="stylesheet" type="text/css" href="https://${url.recursos}/forja/mncs/fontawesome/fa-5-pro/css/all.min.css" />

Junto con la librería estiloUMU.css añadir estiloUMU-fa5.css que cambiará algunos iconos de componentes (URL para la versión 1.2):

<fdw:outputStylesheet library="themes" name="um/1_2/css/estiloUMU-fa5.css" />

2.- En filtro-local.properties y filtro-desarrollo.properties añadir una linea con:

url.recursos=recursosdesa.um.es

3.- En filtro-preproduccion.properties añadir una linea con:

url.recursos=recursostest.um.es

4.- En filtro-produccion.properties añadir una linea con:

url.recursos=recursos.um.es

5.- En el pom del proyecto web, si no aparece ya:

Dentro del plugin maven-war-plugin en los excludes añadir:

<exclude>layout/template.xhtml</exclude>

y en los includes añadir:

<include>layout/template.xhtml</include>

Cambio de los iconos

En la página de iconos del Showcase se describe el tipo de icono a usar en cada caso.

En muchos casos habrá que cambiar la clase fa por fal, por ejemplo el icono con clases "fa fa-home" cambiaría a "fal fa-home", también se recomienda añadir la clase icon.

El problema es que algunos iconos han cambiado de nombre, y pueden no verse, así que habrá que revisar toda la aplicación y hacer los cambios correspondientes, para facilitar esta tarea hemos creado un fichero CSS de revisión, este estilo solamente se utiliza en desarrollo para mostrar visualmente los iconos a cambiar:

  • Sustituye los iconos con la clase fa por un cuadrado relleno, porque posiblemente haya que cambiar la clase fa por fal y en caso de necesitar icono solid es recomensable usar fas.
  • Sustituye los iconos que aparecen en la tabla de iconos cambiados por un cuadrado lila dando vueltas, con el propósito que sean facilmente visibles.




  • Sin etiquetas