textCore v1.0

IconAwesome

Catálogo de iconos

Fork de Font Awesome Free con prefijo .ia-*. Incluye tamaños, animaciones (spin, beat…), stack (icono sobre icono), rotación, border y más — mismas utilidades que FA webfont.

Uso

Incluye el CSS y usa las clases ia-solid / ia-regular / ia-brands + ia-nombre.

HTML
<link rel="stylesheet" href="https://textcore.ceballosleon.com/iconawesome/iconawesome.css">

<i class="ia-solid ia-house"></i>
<i class="ia-regular ia-user"></i>
<i class="ia-brands ia-github"></i>

Clases

Primarias: .ia-solid ia-nombre · Alias FA: .fa-solid fa-nombre · Custom: .ia-custom-slug (panel autenticado)

Las utilidades (ia-spin, ia-2x, ia-stack…) también tienen alias fa-* para código existente de Font Awesome.

Tamaños

Escala tipográfica (ia-2xs … ia-2xl) o relativa al texto padre (ia-1x … ia-10x). También ia-fw para ancho fijo (alinear en menús).

ia-2xs
ia-xs
ia-sm
ia-lg
ia-xl
ia-2xl
ia-2x
ia-3x
ia-5x
ia-fw
HTML
<i class="ia-solid ia-camera ia-lg"></i>
<i class="ia-solid ia-star ia-2x"></i>
<i class="ia-solid ia-house ia-fw"></i>

Animaciones

Clases de movimiento igual que Font Awesome. Respeta prefers-reduced-motion. Combina ia-spin + ia-spin-reverse para girar al revés.

Spin ia-spin
Spin reverse ia-spin ia-spin-reverse
Spin pulse ia-spin-pulse
Pulse ia-pulse
Beat ia-beat
Beat fade ia-beat-fade
Bounce ia-bounce
Shake ia-shake
Fade ia-fade
Flip (anim) ia-flip
HTML
<i class="ia-solid ia-spinner ia-spin"></i>
<i class="ia-solid ia-spinner ia-spin ia-spin-reverse"></i>
<i class="ia-solid ia-heart ia-beat"></i>
<i class="ia-solid ia-bell ia-shake"></i>
Variables CSS: puedes afinar con --fa-animation-duration, --fa-animation-iteration-count, --fa-animation-timing.

Stack (icono sobre icono)

En webfont, la composición se hace con ia-stack: el fondo usa ia-stack-2x y el icono superior ia-stack-1x. ia-inverse pinta el icono de arriba en blanco (o --fa-inverse).

Check en square
Flag en circle
Ban sobre camera
Avatar
HTML
<span class="ia-stack ia-2x">
  <i class="ia-solid ia-square ia-stack-2x"></i>
  <i class="ia-solid ia-check ia-stack-1x ia-inverse"></i>
</span>

<span class="ia-stack ia-2x">
  <i class="ia-solid ia-camera ia-stack-1x"></i>
  <i class="ia-solid ia-ban ia-stack-2x" style="color:#ef4444"></i>
</span>
Nota: las clases fa-layers / fa-layers-counter de Font Awesome SVG+JS no están en este CSS webfont. Usa ia-stack para superponer iconos.

Rotar y flip

Rotación y espejo estáticos (no confundir con la animación ia-flip). Ángulo libre con ia-rotate-by y la variable --fa-rotate-angle.

normal
ia-rotate-90
ia-rotate-180
ia-rotate-270
ia-flip-horizontal
ia-flip-vertical
ia-flip-both
ia-rotate-by
HTML
<i class="ia-solid ia-snowboarding ia-rotate-90"></i>
<i class="ia-solid ia-snowboarding ia-flip-horizontal"></i>
<i class="ia-solid ia-snowboarding ia-rotate-by" style="--fa-rotate-angle:45deg"></i>

Border y pull

ia-border enmarca el icono. ia-pull-left / ia-pull-right lo flotan junto al texto (como una inicial tipográfica).

IconAwesome hereda las utilidades de composición de Font Awesome Free. Usa ia-pull-left o ia-pull-right para integrar el icono en un párrafo sin maquetar a mano.

ia-border
HTML
<i class="ia-solid ia-quote-left ia-2x ia-pull-left ia-border"></i>
<p>Texto que fluye alrededor del icono…</p>

<i class="ia-solid ia-info ia-border"></i>

Listas con iconos

Sustituye las viñetas por iconos con ia-ul en el <ul> y ia-li en cada icono.

  • Ítem completado
  • Pendiente
  • En progreso
HTML
<ul class="ia-ul">
  <li><span class="ia-li"><i class="ia-solid ia-check-square"></i></span> Completado</li>
  <li><span class="ia-li"><i class="ia-solid ia-square"></i></span> Pendiente</li>
</ul>

Tester de iconos

Prueba nombre, estilo, tamaño, color y animación en vivo. El HTML se actualiza al instante.

ia-solid ia-house

Estilo
Tamaño
Animación
Color
HTML