css - iconos - icon tag html
Fuentes de iconos vs imágenes (6)
Mi administrador me dice que no use fuentes de iconos en nuestros sitios web, ya que es otra solicitud http más los kBs adicionales para descargar. Además, como tendría que usar content before para la fuente (no puedo cambiar el html), él prefiere las imágenes de fondo para que funcionen en IE7.
Personalmente me encantan las pequeñas cosas, ¡tan bonitas y crujientes y de tamaño variable!
Lo entiendo si solo usamos un par de íconos en un sitio web, pero si quisiera usar, diga 5 íconos en un sitio, ¿qué piensan ustedes? ¿Vale la pena usar una fuente de icono o está en lo cierto al pensar que no lo es?
Soy solo un imbécil para cualquier cosa nueva y emocionante, y este año es la pantalla de la retina.
Fuentes de iconos y pantallas de alta densidad.
El uso de fuentes de iconos será cada vez más relevante a medida que haya más pantallas de alta resolución / densidad disponibles.
Un icono de 16×16px puede verse horrible en una pantalla de alta densidad (> 300ppi). Puede mostrarse increíblemente pequeño o no estar afilado debido a la escala automática. Por otro lado, un icono de fuente 1em se representará correctamente y con nitidez, independientemente de la densidad de la pantalla.
Por supuesto, todo se reduce a su
- usuarios de la aplicación y
- sus requisitos (IE7 parece ser el principal factor de ruptura)
Por ahora los sprites son el camino a seguir.
Desventajas?
Las fuentes de iconos también tienen un problema diferente. Todos los iconos son de un solo color. Aún no hay un estándar de fuente para tener capacidad de múltiples colores. Y probablemente no lo será. Al menos no para fuentes. Hay posibilidades de hacer varios colores utilizando fuentes SVG, que no es un tipo / formato de fuente per se, pero puede ser un contenedor de fuentes y usarse como un mecanismo de entrega de fuentes en su navegador. Al hacer iconos de múltiples colores como fuentes SVG, es posible tener iconos escalables de colores (gracias a @Joey).
Las imágenes de iconos vectorizados se adaptarían mejor a iconos de tamaño variable a todo color.
Peticiones e iconos de fuentes.
El argumento de su jefe sobre la solicitud adicional es simplemente falso. Realmente no importa si sus íconos son parte de un archivo o (en el mejor de los casos) parte de una imagen de sprite.
Ambos generan una solicitud HTTP para recuperar el recurso. El tamaño del archivo depende en gran medida de la complejidad y el formato, pero puede ser que la imagen del sprite sea más pequeña. Pero tener un archivo de fuente de unos pocos kilos más grande realmente no hace mucha diferencia. Ambos se ponen en caché en el cliente después.
Cuando utiliza fuentes, los diferentes navegadores en diferentes plataformas darán diferentes resultados. Los archivos PNG darán resultados estables e independientes.
El tiene razón. Yo usaría sprites css en este caso. Y si tiene que admitir ie7 (lo siento mucho) realmente no tiene ninguna opción. Explorando esas cosas por su cuenta, por supuesto, nunca se sabe qué será útil o cuándo.
He implementado una biblioteca de íconos de fuentes con icomoon y funciona bien en todos los navegadores, incluido ie7. Esta es una práctica adecuada para conjuntos pequeños de íconos, la escala de la fuente correctamente, se puede cambiar a cualquier color que necesite y no tiene que preocuparse por la coincidencia de colores de fondo transparente PNG / GIF.
Sin embargo ... Si su biblioteca se vuelve más grande (la mía ahora tiene alrededor de 40 iconos), se vuelve cada vez más difícil de mantener. Si el diseñador deja de trabajar en el proyecto, o si necesita cambiar los íconos, es un proceso laborioso actualizar las fuentes. Todo entonces necesita ser reexaminado. También es difícil dinámicamente los íconos usando CSS (por ejemplo, 7).
Entonces, dada la dificultad de mantenimiento, estoy considerando volver a una serie de sprites (de diferentes colores). Las razones son:
Cualquier diseñador puede agregar fácilmente un nuevo icono al conjunto. El CSS no necesita ser reexaminado o alterado. No tienes que joder con las soluciones de JavaScript para IE. No necesitas javascript en absoluto.
Para pantallas de retina, simplemente cree una versión del sprite al doble del tamaño. Es probable que tenga que tener una versión diferente del CSS para la retina independientemente, ya que todas las demás imágenes de su sitio tendrán el mismo problema de densidad.
Personalmente uso Font Awesome como mi recurso principal para las fuentes. En mi caso, lo cargué desde el CDN, saltando a otras páginas que ya lo usaron y el navegador lo almacenó en caché.
Si el tamaño del archivo es una preocupación, puedo recomendarte esta increíble herramienta increíble.
Le permite combinar varias fuentes en un solo archivo, y solo incluye los iconos que realmente usa.
http://www.icnfnt.com/ hace lo mismo con fontawesome, pero me gusta más Fontello porque permite usar más fuentes.
fuentes de iconos es la manera de ir honestamente en mi opinión ...
EDITAR Últimamente he estado usando mucho esta aplicación también: http://icomoon.io/
Recomendaría 2 soluciones a su problema. Esto es lo que usaría para el mejor soporte de los clientes, como si quisieran cambiar el texto, el tamaño u otras cosas.
Use Fontsquirrel para crear una fuente web e insértelo en su sitio web a través de su css y agréguelo a su directorio ftp si eso no es bonito, use las fuentes web de google
Si no se ve así, debería buscar la solución de imagen que dijo su jefe ...
Todo esto también depende de la cantidad de tiempo que tenga para resolver su problema y
Por cierto, si no puedes acceder al html, pensé que podrías acceder al css que puedes hacer a través de la mayoría de los backends, si no puedes, ¡ve a la imagen!
Por último, pero no menos importante, si decide utilizar la solución de imagen, cree un sprite que dirija a través de una posición de fondo. De esta manera solo tienes que cargar 1 imagen para todos tus pequeños íconos.