XenFacil.com
Administrador
- Mensajes
- 441
- Puntuación de reacciones
- 57
- Puntos
- 28
Cambios en Font Awesome
Debido a un gran numero de cambios en la arquitectura de FA5, en particular, a la capacidad de utilizar diferentes estilos y separar los íconos de marca según su estilo, se ha hecho necesario introducir algunas ayudas en XF 2.1 para llamar a los íconos de la manera más simple posible..
Veremos primero unos cuantos pequeños cambios relativos al uso de los iconos en CSS.
Cambios en el combinado m-faBase()
Ahora viene preparado para manejar los íconos y el estilo que se desee. De forma predeterminada, se mostrará un icono sin marca en el grosor predeterminado, pero hay argumentos nuevos que se pueden pasar.
O, si se desea un icono Pro de un estilo específico:
There are three variables available for FA styles and they are @faWeight-solid, @faWeight-regular and @faWeight-light. These style variables actually correspond to the font weight values 900, 400 and 300 respectively.
Llamar a los iconos con la nueva etiqueta <xf:fa>
Naturalmente, se puede seguir utilizando la denominación anterior (que era muy similar a FA4) aunque para mayor facilidad de uso se utiliza en su lugar la sintaxis de plantillas, especial y generalmente tal y como se querría para un uso correcto del estilo FA5 configurado en el estilo de visitantes.
Por ejemplo, para llamar al icono usuario en el estilo predeterminado, puede utilizarse:
que ahora aún es más simple de usar:
Si se tiene una razón específica para utilizar un icono con un estilo diferente, también está soportado:
Y puede llamarse a los iconos con marca o PRO, algo así como:
Accediendo a cualquier icono FA con la etiqueta <xf:button>
Desde hace algún tiempo se viene soportando el atributo icono en la etiquetar button, siendo este enfoque válido y en algunos casos se asignará a una frase predeterminada que utilice ese estilo de. Por ejemplo:
Que genera:
En XF 2.1 esto se ha expandido para soportar cualquier icono FA icon que utilice un nuevo atributo fa. Por ejemplo:
lo que produce
También puede utilizarse el atributo fa con <xf:submitrow /> para poder adjuntar un icono al botón submit primario.
Agregar contexto extra en las entradas input con iconos
Se recomienda utilizar esto con moderación ya que por regla general no es una convención de la Interfaz de usuario que se utilice mucho en el software, pero ahora es posible mostrar un icono dentro de una entrada en XF 2.1. Por ejemplo:
lo que produce:
Continúar leyendo...
Debido a un gran numero de cambios en la arquitectura de FA5, en particular, a la capacidad de utilizar diferentes estilos y separar los íconos de marca según su estilo, se ha hecho necesario introducir algunas ayudas en XF 2.1 para llamar a los íconos de la manera más simple posible..
Veremos primero unos cuantos pequeños cambios relativos al uso de los iconos en CSS.
Cambios en el combinado m-faBase()
Ahora viene preparado para manejar los íconos y el estilo que se desee. De forma predeterminada, se mostrará un icono sin marca en el grosor predeterminado, pero hay argumentos nuevos que se pueden pasar.
Less:
&:before
{
.m-faBase('Brands');
.m-faContent(@fa-var-facebook);
}
O, si se desea un icono Pro de un estilo específico:
Less:
&:before
{
.m-faBase('Pro', @faWeight-solid);
.m-faContent(@fa-var-bookmark);
}
Llamar a los iconos con la nueva etiqueta <xf:fa>
Naturalmente, se puede seguir utilizando la denominación anterior (que era muy similar a FA4) aunque para mayor facilidad de uso se utiliza en su lugar la sintaxis de plantillas, especial y generalmente tal y como se querría para un uso correcto del estilo FA5 configurado en el estilo de visitantes.
Por ejemplo, para llamar al icono usuario en el estilo predeterminado, puede utilizarse:
HTML:
<i class="fa{{ fa_weight() }} fa-user"></i>
HTML:
<xf:fa icon="fa-user" />
HTML:
<xf:fa icon="fas fa-user" />
HTML:
<xf:fa icon="fab fa-github" />
Accediendo a cualquier icono FA con la etiqueta <xf:button>
Desde hace algún tiempo se viene soportando el atributo icono en la etiquetar button, siendo este enfoque válido y en algunos casos se asignará a una frase predeterminada que utilice ese estilo de. Por ejemplo:
HTML:
<xf:button icon="save" />
En XF 2.1 esto se ha expandido para soportar cualquier icono FA icon que utilice un nuevo atributo fa. Por ejemplo:
HTML:
<xf:button fa="fa-cloud-upload">Do the thing</xf:button>
También puede utilizarse el atributo fa con <xf:submitrow /> para poder adjuntar un icono al botón submit primario.
Agregar contexto extra en las entradas input con iconos
Se recomienda utilizar esto con moderación ya que por regla general no es una convención de la Interfaz de usuario que se utilice mucho en el software, pero ahora es posible mostrar un icono dentro de una entrada en XF 2.1. Por ejemplo:
HTML:
<xf:textboxrow rowtype="fullWidth noLabel" placeholder="Write a comment..." fa="fa-pencil" />
Continúar leyendo...
Última edición por un moderador: