[SOLUCIONADO] .png para iconos de secciones

[edurocc]

Hola.
Tengo una plantilla de una pagina web, y la pagina tiene secciones, por ejemplo "News", esta News al lado del titulo hay un icono que no esta linkeado a ningun lado, solo es una referencia grafica.
No recuerdo ahora si es del html o del css pero referencia a una imagen.png
Esta imagen.png es como una hoja y en distintos sectores de la pagina hay dibujos sueltos, uno de ellos el que corresponde a la News.
Pregunto:
Como se hace para referenciar las coordenadas de que dibujo tomar? o que sector tomar?
Y que ventajas te da tener todas las imagenes de esa manera y no hacer un archivo de cada una?
Gracias.

[Mariano_Floyd]

Se los conoce como sprites en css. Se los utiliza con la propiedad background-position. La ventaja de eso, es que no sobrecargas la web con imágenes, en un solo png tenes todos los iconos en ese caso que vas a utilizar, aligerando así la pagina.

[edurocc]

Exelente, me gusto !!!
Como se genera? Con photoshop se puede? Como se escribe en el css o cuales son las opciones? Algun link para leer que me recomiendes sobre el tema?
Gracias.

[Mariano_Floyd]

El png lo generas con el editor de imágenes que mas te guste. Yo a manera personal utilizo el illustrator para crear los iconos y los exporto directo como png. A veces los retoco en ps, pero no hay una norma de "tienes que utilizar X editor si no no te funcionara". En este link te lo explica bastante bien, no deberias tener problema. Leelo y te daras cuenta de la simpleza de los sprites: http://librosweb.es/css_avanzado/cap...y_sprites.html

[pzin]

Supongo que habrán herramientas por ahí más automatizadas. En SASS, si usas Compass por ejemplo, tiene una forma excelente de generar sprites automáticamente: http://compass-style.org/help/tutorials/spriting
Obviamente no tiene mucho sentido usar SASS si no lo estás usando ya. Pero haber herramientas, haylas.

Por otro lado, si son iconos lo que quieres hacer, más que sprites lo que se viene usando hoy en día son fuentes de iconos, que con herramientas como IconMoon es un juego de niños.

[edurocc]

Interesante, Muy interesante.
No se si aprovechar este tema para preguntar mas sobre sobre fuentes de iconos.
No entiendo como se usa, entre en iconmoon descargue un icono de facebook como fuente, pero no veo como trabajar con ella.
Un poquito mas de informaciion x fa.
Gracias.

[pzin]

Simplemente es una fuente de iconos. Luego mediante CSS se crean pseudo-elementos que usan esa fuente y mediante content se introduce el glifo (¿letra?) relativo a ese icono.

Si no lo entiendes, seguro que hay algún artículo en Internet que lo explica.

Lo bueno de trabajar así, aparte de tener una sola llamada como cuando trabajas con sprites, es que los iconos, al ser una fuente, puedes darles el tamaño y color que quieras, aplicar estilos que puedes aplicar a cualquier texto, etc.