Herramienta que agrega iconos a HTML

Los iconos son independiente de un idioma, lo que genera un lenguaje visual multinacional que te trasmiten un conocimiento, ademas, los iconos en una pagina web agregan una experiencia de usuario mucho mas agradable que solo texto.

Por lo que te enseñare varias maneras de agregarle iconos a tu documento HTML

Font Awesome

Esta herramienta tiene una enorme cantidad de iconos a tu disposición y la forma de implementarlo a tu código es bastante sencilla:

Puedes agregar la siguiente hoja de estilos a tu documento HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Ó puedes importar la siguiente linea a tu CSS

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css);

Necesitas un contenedor al cual agregarle el icono, una vez tengas el contenedor le agregas dos clases a tu contenedor “fa” y “fa-NOMBRE-DEL-ICONO” y tienes tu icono.

Mostrare un ejemplo con una sintaxis que luce bien y es fácil de entender. Mi icono sera un corazón

<div>
	<i class="fa fa-heart"></i>
</div>

Puedes darles mas colores a estos iconos desde CSS como cambiar el color a rojo.

Puedes ver la biblioteca de iconos que puedes usar en el siguiente link
https://fontawesome.com/icons?d=gallery&m=free

IcoMoon

Esta herramienta no tiene la versatilidad de agregar una hoja de estilos, ahora le agregas fuentes adicionales a tu archivos para que en código lo puedas usar, la ventaja de esta herramienta es que no depende de los servidores del proveedor después de descargarlos ya que estarán dentro tus archivos y a mi gusto lucen un poco mejores que los anteriores.

Vas te diriges a https://icomoon.io/ le das al botón que dice IcoMoon App o puedes ir directamente a https://icomoon.io/app/#/select

Selecciona todos los iconos que quieras, después le das al botón “Generate Font F” encontraras tu lista de nombre y iconos seleccionados,(puedes modificar el nombre ese nombre sera como identificaras al icono) y le das en download

En tu carpeta de descargas encontraras archivo comprimido tipo zip dentro encontraras varios archivos pero solo dos de importancia una carpeta con nombre “fonts” y un documento de texto plano con el nombre “style”

1. Lleva la carpeta a fonts a la carpeta en donde estas desarrollando tu proyecto .
2. Abres archivo style y compias todo lo que contenga y lo copias en tu documento CSS principal.

@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?eri2lx');
  src:  url('fonts/icomoon.eot?eri2lx#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?eri2lx') format('truetype'),
    url('fonts/icomoon.woff?eri2lx') format('woff'),
    url('fonts/icomoon.svg?eri2lx#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
  content: "\e900";
}
/*resto del documento CSS --------------------->*/

Recordar que la carpeta fonts esta al mismo nivel que el documento CSS principal de lo contrario cambiar las rutas dentro del CSS en las urls

Al Contenedor que le queramos agregar el icono se le tiene que agregar la clase icon-NOMBRE-DEL-ICONO

Ejemplo : en este caso tengo un icono de una casita por lo que el keyword sera home

<div>
	<i class="ico-home"></i>
</div>

En este vídeo leonidas muestra lo que acabo de explicar IcoMoon hamburger video by leonidas

Por ultimo Los emojis

Cabe destacar que los emojis son exactamente la combinación de caracteres unicode o utf-8 por lo que todos los navegadores los entenderán.

Si los los trasforman de texto a emoji desde HTML necesitas la siguiente sintaxis:
&#xCODIGODELEMOJI
Puedes encontrar muchos códigos de emojis en el siguiente link
https://apps.timwhitlock.info/emoji/tables/unicode

El código es EL que le sigue a los caracteres U+
forma: U+1F600; codigo: 1F600

Colocas el emoji en un contenedor con su sintaxis indicada

<div>
	<i> &#x1F608 </i>
</div>

Cabe destacar que existe otra forma mediante CSS pero esa dejare que la busques

En estos días subiré un Pen con un menú cono los iconos de Font Awesome y emojis

Y tu que otra manera conoces para generar iconos a una pagina Web?