Porque hizo el icono con background en css si podía simplemente poner una img en el html no?

Hola @JuanGalvis, me parece una excelente observación.

De entrada tienes razón, bien podría hacerse con la pura imagen y ya, sin embargo hay diversas maneras de enfrentar el tema, aquí algunas de ellas:

• Incrustar imagenes con <img>
• Hacer uso de vectores SVG tanto como <img> como <svg>
• Usar icon fonts (icon-moon, fontawesome, material icons)
• Usar una etiqueta <a> con fondo css
• Usar un sprite sheet y hacer clipping mediante las propiedades de background que ofrece css.

Las primeras no tienen gran ciencia, simplemente importamos recursos externos. Pero... ¿Cómo hacer para ahorrar peticiones de recursos al servidor?

La respuesta es usar una sola imagen no tan grande que contenga todos los iconos con sus posibles estados y que dicha imagen sea comprimida para la web.

Aquí un ejemplo de un sprite sheet. Es de un ecommerce de ropa. Contiene los iconos de carrito de compra, buscar, favorito y dos estados para el usuario.

Ahora veamos cómo usarlo en css:

ul.icons li a {
	background: url(../Content/responsive/Common/images/sprite.png) left top;
    	height: 24px;
    	display: table;
    	margin-top: 2px;
    	position: relative;
}

ul.icons li a.search {
	background-position: -60px 0;
    	width: 20px;
}

ul.icons li a.user {
	background-position: 0 0;
    	width: 18px;
}

Deseo que te sea de utilidad. Finalmente el camino que te resulte más simple, es el mejor. Cada proyecto tiene sus propios requerimientos y retos por resolver.

A mí me gusta mucho usar fuentes de iconos o SVG.

Saludos.

No fue calra esa parte background-image: url ('ruta/de-la-imagen'); background-repeat: no-repeat; background-position: center; background-size: contain;

creo que con un icono no es lo mejor

Hay 2 formas de poner imagen, la etiqueta img en hmtl que te permite colocar una imagen y la propiedad background-image que permite colocar una imagen de fondo. :)

Considero que de esta manera puedes darle más propiedades a la imagen. Por ejemplo

background-image: url ('ruta/de-la-imagen');
background-repeat: no-repeat;
background-position: center;
background-size: contain;