Font Awesome

by Raúl Prieto Fernández


Tutorial: Cómo usar iconos Font Awesome en tu página web

Uso básico

Tipo Icono Código
Regular: <i class="far fa-user">
Solid: <i class="fas fa-user">

Cambiar Tamaño

Tamaño Icono Código
2em <span style="font-size: 2em;"><i class="fas fa-user"></i></span>
48px <span style="font-size: 48px;"><i class="fas fa-user"></i></span>
4rem <span style="font-size: 4rem;"><i class="fas fa-user"></i></span>
xs <i class="fab fa-angellist fa-xs">
sm <i class="fab fa-angellist fa-sm">
lg <i class="fab fa-angellist fa-lg">
1x <i class="fas fa-award fa-1x">
2x <i class="fas fa-award fa-2x">
3x <i class="fas fa-award fa-3x">
4x <i class="fas fa-award fa-4x">
5x <i class="fas fa-award fa-5x">
6x <i class="fas fa-award fa-6x">
7x <i class="fas fa-award fa-7x">
8x <i class="fas fa-award fa-8x">
9x <i class="fas fa-award fa-9x">
10x <i class="fas fa-award fa-10x">

Cambiar Colores

Color Icono Código
indigo <span style="color: indigo;"><i class="fas fa-basketball-ball"></i></span>
coral <span style="color: dodgerblue;"><i class="fas fa-basketball-ball"></i></span>
magenta <span style="color: magenta;"><i class="fas fa-basketball-ball"></i></span>

Cambiar Colores y Tamaño

Color Tamaño Icono Código
indigo 2em <i class="fab fa-cc-paypal">
coral 3em <i class="fab fa-cc-paypal">
magenta 4rem <i class="fab fa-cc-paypal">