Iconos

Asset

Base

Nuestro sistema de iconos se construye utilizando la tipografía Font Awesome Pro 7, en su versión Classic, que incluye los estilos light, regular, solid y custom-kit.

Al ser una tipografía, su uso es sencillo: basta con utilizar una etiqueta HTML y clases CSS específicas para designar el estilo y el glifo. Por otro lado, en Figma, simplemente es necesario usar la tipografía en la herramienta de texto.

Tipografía

Estilos

Tenemos tres estilos diferentes que se distinguen por su peso visual: light, regular y solid. Usamos light para texto regular, como por ejemplo, en dropdowns o listados. Regular para la mayoría de botones o en textos con peso medium. Por último, usamos Solid generalmente para botones de alto contraste, como los estilo primary, secondary o danger.

Buttons

Componentes

Estilo

Code

Html Rails

            
            <i class="fal fa-skull"></i>

            
            <i class="far fa-skull"></i>

            
            <i class="fas fa-skull"></i>

            
            <%= icon(:fal, 'skull') %>

            
            <%= icon(:far, 'skull') %>

            
            <%= icon(:fas, 'skull') %>

El icono requiere dos clases: la primera es el estilo fas, far o fas y el segundo es el nombre del glifo fa-skull. Puedes buscar el nombre del iconos que necesitas desde Font Awesome Pro.

Nota Los iconos se renderizan con la etiqueta <i> a través del pseudo elemento ::before. La propiedad content asigna el glifo mientras que el estilo se define a través de la propiedad font-weight.

Figma

Para poder usar y ver los iconos en Figma, primero debemos asegurarnos de tener instalada la versión correcta de la tipografía Font Awesome Pro 7. Dado que los iconos son parte de una tipografía, debemos utilizarlos como tal. Para ello, es necesario guiarnos por los nombres de los iconos proporcionados desde la página de Font Awesome.

Por ejemplo, si queremos utilizar el ícono de una calavera , simplemente debemos escribir skull como texto plano. De esta manera, la tipografía de Font Awesome, a través de su función de ligaduras, convertirá automáticamente el texto en el icono correspondiente.

Nota Puedes usar los estilos de textos icon/light, icon/solid y icon/regular disponible en todos los archivos Figma.

Custom Kit

Utilizamos un cuarto estilo de Font Awesome que personalizamos nosotros mismos (FA Kit). Esta tipografía nos permite incorporar iconos personalizados, evitando así la necesidad de usar Font Awesome Brands. De esta manera, solo tenemos los iconos que realmente necesitamos.

Kit custom

EasyBroker 1.2

Puedes encontrar los datos de la cuenta en 1Password.

Nota Puedes usar el estilo de texto icon/custom disponible en todos los archivos Figma.