Este team de redactores ha estado mucho tiempo investigando respuestas a tu duda, te regalamos la respuestas así que nuestro deseo es resultarte de gran ayuda.
Solución:
Puedes usar filtros con -webkit-filter y filter: Los filtros son relativamente nuevos para los navegadores, pero son compatibles con más del 90 % de los navegadores según la siguiente tabla de CanIUse: https://caniuse.com/#feat=css-filters
Puedes cambiar una imagen a escala de grises, sepia y mucho más (mira el ejemplo).
Ahora puedes cambiar el color de un archivo PNG con filtros.
body
background-color:#03030a;
min-width: 800px;
min-height: 400px
img
width:20%;
float:left;
margin:0;
/*Filter styles*/
.saturate filter: saturate(3);
.grayscale filter: grayscale(100%);
.contrast filter: contrast(160%);
.brightness filter: brightness(0.25);
.blur filter: blur(3px);
.invert filter: invert(100%);
.sepia filter: sepia(100%);
.huerotate filter: hue-rotate(180deg);
.rss.opacity filter: opacity(50%);
Fuente
Encontré este gran ejemplo de codepen en el que insertas tu color hexadecimal valor y devuelve el filtro necesario para aplicar este color a png
Generador de filtros CSS para convertir de negro a color hexadecimal objetivo
por ejemplo, necesitaba que mi png tuviera el siguiente color #1a9790
entonces tienes que aplicarte el siguiente filtro png
filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);
Es posible que desee echar un vistazo a las fuentes de iconos. http://css-tricks.com/examples/IconFont/
EDITAR: estoy usando Font-Awesome en mi último proyecto. Incluso puedes arrancarlo. Simplemente ponga esto en su :
Y luego continúe y agregue algunos enlaces de íconos como este:
Aquí está la hoja de trucos completa
–editar–
Font-Awesome usa diferentes nombres de clase en la nueva versión, probablemente porque esto hace que los archivos CSS sean drásticamente más pequeños y para evitar clases CSS ambiguas. Así que ahora deberías usar:
EDITAR 2:
Me acabo de enterar que github también usa su propia fuente de iconos: Octicons Es gratis para descargar. También tienen algunos consejos sobre cómo crear sus propias fuentes de iconos.