Incrustando webfonts de Fontawesome

Vista previa del material en texto

Incrustando webfonts
Tipografía de íconos
Puedes encontrar el kit en: https://fontawesome.com/download
Descargar la versión gratis para web
Font awesome
1. Guarda en donde tienes tu html las carpetas css y webfonts
2. Inserta el siguiente código en tu html (en el head)
<link rel="stylesheet" href="css/all.css">
3. Busca el código del ícono en http://fontawesome.com
4. Selecciona el ícono y copia el código
4. Pégalo en tu html donde quieras aplicarlo
<i class= "fa-solid fa-cat">
</i>
1. Primero crea tu lista en el html
Tip Súper pro: ¿cómo Puedo meter íconos en mis listas?
<ul>
<li>Peras</li>
<li>Manzanas</li>
<li>Guayabas</li>
</ul>
ul {
list-style-type: none;
}
2. Ahora elimina los bullets que tiene la lista por default
li:before {
font-family: FontAwesome;
 content: "\f6be";
 color: green;}
3. Agrega el siguiente estilo. Recuerda poner el Unicode de tu ícono (lo encuentras donde copiaste el código de tu ícono)
Iconito que sale en la pestaña del navegador
Favicon
1. Crea un png de 128x128 px 
2. Guárdalo en tu carpeta de imágenes donde tienes el html
3. Aplica el siguiente código en tu html (en el head):
<link rel= "icon" type="image/png" href= "images/favicon.png">
Otro tip: si instalas las fuentes que descargaste de Font Awesome en tu computadora, puedes usar alguno de esos íconos para hacer tu favicon en Photoshop
1. En tu canvas has click con la herramienta de texto
2. Abre el panel de pictogramas (glyphs panel) adentro del menú Tipo (Type)
Elige la tipografía
Selecciona el ícono con doble click