Usar fuentes de iconos
Si a una etiqueta se le asocia la fuente que contiene los iconos, se muestran los iconos correspondientes. Como los iconos suelen estar colocados en caracteres más allá de los habituales (letras, números, etc.), para referirse a ellos se debe utilizar su código Unicode.
El ejemplo siguiente muestra los primeros iconos de una de las fuentes de iconos más populares: Font Awesome
<p>a b c d e f g ...</p>
<p>    
    <br>
    
    <br>
...</p>
@font-face {
font-family: "FontAwesome";
src: url("fontawesome-webfont.woff");
}
p {
font-family: "FontAwesome", sans-serif;
font-size: 200%;
}
Para facilitar la inserción de iconos, se recurre a insertar los iconos mediante la hoja de estilo. La idea consiste en crear una clase con el nombre del icono y hacer que la hoja de estilo inserte el carácter mediante el pseudo elemento ::before. De esta manera no hace falta conocer el código Unicode del carácter, sino únicamente el nombre de la clase. Lógicamente, la clase se puede asignar a cualquier etiqueta.
<p class="fa-check-circle"> Me gusta</p>
<p><span class="fa-times-circle"></span> No me gusta</p>
@font-face {
font-family: "FontAwesome";
src: url("fontawesome-webfont.woff");
}
p {
font-size: 200%;
}
.fa-times-circle::before {
font-family: "FontAwesome", sans-serif;
content: "\f057";
}
.fa-check-circle::before {
font-family: "FontAwesome", sans-serif;
content: "\f058";
}
Las fuentes de iconos se distribuyen con hojas de estilo que contienen todas las clases correspondientes a todos los caracteres para que sólo haya que enlazar la hoja de estilo para poder utilizar los caracteres.
Además se ha extendido la convención de insertar los iconos utilizando la etiqueta <i>, que en HTML 4 era una etiqueta desaconsejada. Aprovechando que en HTML 5 la etiqueta <i> se ha recuperado (aunque sea para etiquetar texto "especial", como el nombre de una especie animal, el nombre de un barco, etc.), los diseñadores web la están utilizando para las fuentes de iconos (supongo que porque "icono" empieza por la letra "i").
Nota: En FontAwesome se asignan dos clases, la clase general fa y la clase específica con el nombre del icono.
...
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<p><i class="fa fa-check-circle"></i> Me gusta</p>
<p><i class="fa fa-times-circle"></i> No me gusta</p>
</body>
p {
font-size: 200%;
}
Los iconos de una fuente de iconos se tratan como un carácter más, por lo que se le pueden aplicar las propiedades de hojas de estilo.
...
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<p><i class="fa fa-check-circle verde"></i> Me gusta</p>
<p><i class="fa fa-times-circle rojo"></i> No me gusta</p>
</body>
p {
font-size: 200%;
}
.rojo {
color: red;
}
.verde {
color: green;
}
Al descargar una fuente de iconos, hay que fijarse en la estructura de carpetas que presuponen las fuentes de iconos. A menudo la hoja de estilo se encuentra en una carpeta css y la fuente en una carpeta font o fonts. Se puede cambiar la ubicación de ambas, pero hay que corregir la hoja de estilo para que tenga en cuenta la nueva ubicación. Si conservamos las carpetas css y fonts, lo lógico es guardar todas las fuentes utilizadas la carpeta fonts y todas las hojas de estilo en la carpeta css.
Por otro lado, se puede:
- mantener la hoja de estilo de la fuente de iconos como una hoja de estilo separada (en ese caso nuestra página contendrá al menos dos enlaces a hojas de estilo, uno a la hoja de estilo de la fuente y otro a nuestra hoja de estilo)
Nota: Cuando se enlazan varias hojas de estilo simultáneamente no se debe incluir el atributo title en el enlace. - se puede copiar y pegar en nuestra hoja de estilo la parte de la hoja de estilo de la fuente que necesitemos (las clases generales y las clases de los iconos utilizados en la página)
Para que las fuentes de iconos funcionen en la mayor cantidad de navegadores posible, las fuentes de iconos se distribuyen en varios formatos (woff, svg, ttf, eot, etc.) y la regla @font-face de la hoja de estilo hace referencia a todas ellas. En los ejercicios propuestos en este curso se utiliza únicamente la fuente en formato woff.