Font Awesome

Font Awesome Configuración

Instalación Paso 1

npm install @fortawesome/fontawesome-free

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Integración Paso 2

JavaScript Vanilla

<!-- Usando clases CSS -->
<i class="fas fa-user"></i>

<script>
  // Importar desde node_modules
  import '@fortawesome/fontawesome-free/css/all.min.css';
</script>

Vue.js

<template>
  <i class="fas fa-user"></i>
</template>

<script>
import '@fortawesome/fontawesome-free/css/all.min.css'

export default {
  name: 'App'
}
</script>

Angular

// styles.css
@import '@fortawesome/fontawesome-free/css/all.min.css';

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

// angular.json
{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ]
          }
        }
      }
    }
  }
}

Configuración Avanzada Paso 3

Importación Selectiva

// Importar solo los iconos necesarios
import { library } from '@fortawesome/fontawesome-svg-core'
import { faUser, faHeart } from '@fortawesome/free-solid-svg-icons'
import { faGithub } from '@fortawesome/free-brands-svg-icons'

library.add(faUser, faHeart, faGithub)

// Uso
<FontAwesomeIcon icon="user" />

Estilos y Animaciones

// Tamaños
<FontAwesomeIcon icon="user" size="xs" />
<FontAwesomeIcon icon="user" size="lg" />
<FontAwesomeIcon icon="user" size="2x" />

// Rotación
<FontAwesomeIcon icon="user" rotation={90} />

// Animaciones
<FontAwesomeIcon icon="spinner" spin />
<FontAwesomeIcon icon="circle-notch" pulse />

// Transformaciones
<FontAwesomeIcon icon="user" flip="horizontal" />
<FontAwesomeIcon icon="user" transform="shrink-6 left-4" />

Personalización Paso 4

CSS Custom Properties

.custom-icon {
--fa-primary-color: #1a365d;
--fa-secondary-color: #2d3748;
--fa-primary-opacity: 1;
--fa-secondary-opacity: 0.6;
}

.fa-custom-size {
font-size: 2em;
}

Capas y Duotono

// Capas
<span class="fa-layers fa-fw">
<FontAwesomeIcon icon="square" />
<FontAwesomeIcon icon="check" transform="shrink-6" inverse />
</span>

// Duotono
<FontAwesomeIcon icon={['fad', 'user']}
style={{
  '--fa-primary-color': '#1a365d',
  '--fa-secondary-color': '#2d3748',
}}
/>

Optimización Paso 5

Subconjunto de Iconos

import { library } from '@fortawesome/fontawesome-svg-core'
import {
faUser,
faHeart,
faSearch
} from '@fortawesome/free-solid-svg-icons'

// Solo importar los iconos necesarios
library.add(
faUser,
faHeart,
faSearch
)

export const ICONS = {
USER: 'user',
HEART: 'heart',
SEARCH: 'search'
}

Precargar Iconos

// Agregar en el head del HTML
<link rel="preload" href="path/to/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous">

// O en CSS
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url("path/to/fa-solid-900.woff2") format("woff2");
}

Mejores Prácticas Recomendado

Componente Reutilizable

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export function Icon({
name,
type = 'fas',
size = '1x',
className = '',
...props
}) {
return (
  <FontAwesomeIcon
    icon={[type, name]}
    size={size}
    className={className}
    {...props}
  />
)
}

// Uso
<Icon name="user" type="far" size="2x" className="text-primary" />

Accesibilidad

// ✅ Bueno: Usar title y aria-label
<FontAwesomeIcon
  icon="user"
  title="Perfil de usuario"
  aria-label="Ver perfil de usuario"
/>

// ✅ Bueno: Icono decorativo
<FontAwesomeIcon
  icon="user"
  aria-hidden="true"
/>

Organización de Iconos

export const ICONS = {
COMMON: {
  SEARCH: ['fas', 'search'],
  USER: ['far', 'user'],
  SETTINGS: ['fas', 'cog']
},
SOCIAL: {
  GITHUB: ['fab', 'github'],
  TWITTER: ['fab', 'twitter'],
  LINKEDIN: ['fab', 'linkedin']
}
}

🐝