Iconos de Foundation
Foundation proporciona 283 iconos, puedes usar CSS para definir su estilo y tamaño.
Los iconos se pueden usar en texto, botones, barras de herramientas, barras de navegación, formularios, etc.
A continuación se muestran ejemplos de iconos de Foundation:
Botón de actualizar:
Icono de verificación:
Icono de página de inicio:
Sintaxis de iconos
El formato de sintaxis para crear iconos es el siguiente:
<i class="fi-name"></i>
nameSustituye la parte por el nombre del icono.
Para usar iconos, necesitamos agregar el archivo de estilos de iconos en la sección <head>:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/foundation-icons.min.css">
Ejemplo de icono
Lo siguiente demuestra ejemplos de uso de iconos:
Ejemplo
<p>Cloud icon as a link:
<a href="#"><i class="fi-cloud"></i></a>
</p>
<p>Styled Cloud icon: <i class="fi-cloud" style="font-size:35px;color:red;"></i></p>
<p>Home icon: <i class="fi-home"></i></p>
<p>Home icon on a button:
<button type="button" class="button">
<i class="fi-home"></i> Home
</button>
</p>
<p>Home icon on a green button:
<button type="button" class="button success">
<i class="fi-home"></i> Home
</button>
</p>
<p>Home icon on a large, light blue link button:
<a href="#" class="button info large">
<i class="fi-home"></i> Home
</a>
</p>
Pruébalo »
Iconos de barra de herramientas
Podemos usar.icon-barla clase para crear un número específico de iconos de barra de herramientas:
Ejemplo
<a href="#" class="item">
<i class="fi-home"></i>
</a>
<a href="#" class="item">
<i class="fi-bookmark"></i>
</a>
<a href="#" class="item">
<i class="fi-info"></i>
</a>
<a href="#" class="item">
<i class="fi-mail"></i>
</a>
<a href="#" class="item">
<i class="fi-like"></i>
</a>
</div>
Pruébalo »
La descripción del icono usa el<label>elemento:
Ejemplo
<a href="#" class="item">
<i class="fi-home"></i>
<label>Home</label>
</a>
<a href="#" class="item">
<i class="fi-share"></i>
<label>Share</label>
</a>
<a href="#" class="item">
<i class="fi-info"></i>
<label>Info</label>
</a>
<a href="#" class="item">
<i class="fi-mail"></i>
<label>Mail</label>
</a>
<a href="#" class="item">
<i class="fi-magnifying-glass"></i>
<label>Search</label>
</a>
</div>
.disabledLa clase permite que el icono no se pueda hacer clic:
Ejemplo
<i class="fi-share"></i>
</a>
<a href="#" class="item disabled">
<i class="fi-mail"></i>
</a>
Pruébalo »
.verticalLa clase se usa para crear una barra de herramientas vertical:
Referencia de iconos de Foundation
Para más contenido sobre iconos, puedes consultar nuestraReferencia de iconos de Foundation.
Otras extensiones