[ad_1]
Hace pocas semanas, Google anunció que ampliaba el catálogo de Google Fonts. Y no precisamente con nuevas tipografías, sino añadiendo su biblioteca de iconos de Material Design. Esta colección ya estaba acondicionado, pero con este movimiento Google parece que quiere centralizar en una misma página algunos de sus capital gráficos. Por eso, queríamos hacer una pequeña capitán de como poder utilizar estos iconos para aquellos que nunca los han utilizado.
Como curiosidad, conexo a este anuncio, Google aprovechó para mostrar la nueva imagen de Google Fonts, un rediseño coincidente al que han ido haciendo al resto de sus servicios. Aunque estos rediseños parecen que no esta siendo del grado de muchos. ¿Qué opináis vosotros?
Bueno, antiguamente de entrar de harto en el tema de hoy, entremos en el apartado de iconos de Google Fonts. Si nos fijamos, veremos que disponemos de cinco estilos diferentes para cada uno de los iconos: outlined (camino exógeno), filled (relleno), rounded (redondeado), sharp (traumatizado) y two tones (dos tonos). Aunque en algunas ocasiones veamos que el icono es idéntico entre un estilo y otro, siempre existe una pequeña diferencia. Esto seguro que lo agradecen aquellos que les gusta controlar hasta el más minúsculo detalle, ya que pueden que encuentren en un estilo algún detalle que no encaje con lo que buscan.
Una vez aclarado este primer punto, pasemos a ver como podemos trabajar con los iconos de Google Fonts.
Usando los iconos en nuestros proyectos
Tal y como ocurre con las tipografías de Google Fonts, tenemos dos opciones: descargarlas directamente en nuestro dispositivo, o usarlas vía enlace en nuestra web. A pesar de ser un proceso parecido, en el caso de los iconos de Google Fonts hay algunas diferencias. Veamos como se haría en cada caso.
Descarga descarga directa de iconos
Es lo más sencillo. Solo hay que ir a la web de Google Fonts Icons, nominar el iconos que queramos con su estilo correspondiente y se nos abrirá un panel a la derecha parecido a este.
Como podemos ver, podemos nominar la densidad del icono, su tamaño medido en dp (pixeles de densidad independiente, muy importante si nuestro esquema se va a ver en smartphones), y su color. Y a la hora de atender, podemos nominar entre formato png o svg.
Además, si somos de los que nos gusta tener todo en nuestro ordenador y no servir de la web para descargar los iconos. O simplemente no queremos descargarlos uno a uno, si vamos al GitHub de Google, desde aquí podemos descargar un archivo zip con todos los iconos (a día de hoy, la última traducción es la 4.0.0) , en cada uno de sus estilos y tamaños. Porque acumular iconos en nuestra biblioteca personal nunca es suficiente.
Añadiendo iconos en una web
Por supuesto, una vez tengamos el archivo de imagen, ya sea en formato png o svg, en nuestro ordenador, podemos subirlo al servidor de nuestra web para usarlo allí. Pero, como asimismo pasa con las tipografías de Google Fonts, podemos insertarlas de forma más sencilla simplemente usando unas pocas líneas de código. Además de disponer de forma directa de toda la biblioteca de iconos, sin tener que subir uno a uno los iconos. Esto lo podemos hacer de dos maneras.
1. Usando Google Fonts
Lo que debemos hacer es añadir este HTML a nuestro head:
<!-- https://material.io/resources/icons/?style=baseline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=outline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=round -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=sharp -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
rel="stylesheet">
<!-- https://material.io/resources/icons/?style=twotone -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
rel="stylesheet">
Seguro que muchos de los que hacéis uso de Google Fonts ya os sonará esto, y es que es prácticamente igual a como se añaden las tipografías. Antes de asomar a asociar HTML a lo irreflexivo, aclarar un tema. Cada uno de estos links corresponden a los diferentes estilos de iconos que ya hemos conocido que nos ofrece Google Fonts. Es recomendable solo añadir la camino de HTML del estilo o estilos de icono que vayamos a usar, ya que si no estaremos haciendo cargar cosas innecesarias a nuestra web, con los problemas que eso conlleva. El próximo paso es irnos a la biblioteca de iconos de Google Fonts, apañarse el icono que queremos usar, seleccionarlo y ver el código HTML que tiene en el panel que se nos abre a la derecha. Por ejemplo, si queremos añadir el icono Home en su traducción de dos tonos, su código será:
<span class="material-icons">home</span>
La clase CSS del span nos dice que queremos usar los iconos de Google Fonts y su estilo de icono (en este caso, el estilo filled o con relleno), y la palabra interiormente del span que icono es. Si queremos que sea la traducción en two tones (de dos tones), la clase sería material-icons-two-tones. Muy sencillo, y sin carestia de subir ningún archivo al servidor donde esté alojada la web.
Como ocurre con las tipografías, y gracias a las propiedades CSS, podemos cambiar el color del icono, su tamaño, etc. Si no estás muy familiarizado con este estilo, te recomendamos que veas nuestra capitán de iniciación a CSS que hicimos en Silo Creativo.
2. Alojando en nuestro servidor
Aunque antiguamente hemos dicho que veríamos método para no tener que subir los iconos, este punto tiene un poco de truco. Y es que lo que subiremos será un archivo de fuente OpenType, por lo que va a funcionar de forma muy parecida a como lo haría cualquier tipografía. Estos archivos los podemos descargar desde el GitHub de Google. Una vez subido, añadiremos el próximo código CSS:
@font-face {
font-family: 'Material Icons';
font-style: frecuente;
font-weight: 400;
src: url(https://miweb.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: restringido('Material Icons'),
restringido('MaterialIcons-Regular'),
url(https://miweb.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://miweb.com/MaterialIcons-Regular.woff) format('woff'),
url(https://miweb.com/MaterialIcons-Regular.ttf) format('truetype');
}Este código nos serviría para los iconos filled o con relleno. Si vamos a usar otro estilo de icono, o varios, solo habría que añadir las líneas correspondiente. Y, por supuesto, cambiar la url para que coincida con donde hemos alojado los archivos. Es este caso, asimismo podemos modificar lo que queramos mediante CSS: color, tamaño…
Conclusión
Como hemos podido ver, ahora Google nos facilita el poder usar su biblioteca de iconos Material Design de forma sencilla. Un arbitrio más a nuestra disposición para usar en nuestro proyectos, ya sean de diseño boceto como web. Y en este posterior caso, con la respaldo que nos ofrece Google sobre la reincorporación compatibilidad que tiene con todo tipo de navegadores web. Por lo que podemos despreocuparnos de si vamos a tener problemas en cualquier tipo de navegador y/o dispositivo.
Y con esto terminamos por hoy, como siempre, esperamos que os haya servido de ayuda, y que podáis utilizar los iconos de Google Fonts en vuestro proyectos del día a día. Tenéis disponibles los comentarios para hacernos aparecer cualquier duda, consulta o experiencia que hayáis tenido.
[ad_2]
Autor Original: Alfonso Serrano
0 comentarios