En la cabecera <head> de la página hay que:
La hoja de estilo de la fuente icomoon personalizada presupone que la hoja de estilo style.css se encuentra en la misma carpeta que la página pero que la fuente icomoon.woff se encuentra en la carpeta fonts.
En el ejercicio resuelto:
Al desactivar la hoja de estilo se pueden identificar las siguientes etiquetas:
Los dibujos desaparecen al quitar el estilo, lo que indica que se tratan de fuentes de iconos, por lo que se utilizará la etiqueta <i> (se podría hacer con cualquier otra etiqueta de texto en línea). Los dibujos se han obtenido de la fuente icomoon.io, que se incluye en el fichero descargado. Los dos primeros iconos están en el primer párrafo (flotando a izquierda y derecha), el resto pueden estar en párrafos <p> que sólo contienen los iconos.
Las líneas dejan de verse, así que se trata de bordes. Esto se puede resolver de dos formas:
En este caso se ha hecho de la segunda manera.
Los dos iconos incluidos en el primer párrafo están flotando a izquierda y derecha, por lo que se necesitarán dos clases de elementos <i>:
La propiedad clear se puede aplicar en las divisiones.
Además se utilizan clases para insertar los iconos, que se comentan a continuación.
En este ejercicio se utiliza la fuente de Google Fonts Black Ops One y una fuente de iconos creada en icomoon.io.
En el archivo comprimido se incluye la fuente de iconos que contiene únicamente los iconos utilizados en la página, pero se anima a los alumnos a que creen la fuente de icono utilizando la aplicación web icomoon.io.
icomoon.io: Los dibujos utilizados corresponden a las clases de la fuente icomoon personalizada. Las clases de los iconos son las siguientes (en esta fuente sólo es necesario asignar una clase):
Como cada icono tiene un color distinto, el color se puede definir en la clase.
Al restablecer el estilo se pueden identificar las propiedades utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio HTML 5 + CSS 3 y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio HTML 5 + CSS 3.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir lo mismo, por lo que la solución no es nunca única.