Iconos de Google (Material icons) offline

Publicado por parzibyte en

Introducción

Los Material icons o Iconos de material design son, como su nombre lo dice, iconos que nos ayudan a adornar y mejorar nuestras aplicaciones web. No siempre vamos a tener internet, puede que portemos nuestra app para una pc que no tenga acceso a internet. O igual y queremos alojar nosotros mismos los iconos, por si algo malo llega a pasar.

El punto es que en algún momento necesitaremos descargar iconos de Material icons para ternerlos offline. Y hoy vengo a mostrar cómo descargarlos.

¿De qué iconos hablamos?

Por si no sabes de lo que hablo, me refiero a los que aparecen en este enlace.

Podemos incluirlos así:

Pero como lo dije, vamos a ver cómo incluirlos offline.

No sé si sea legal descargar los iconos. Yo supongo que no hay ningún problema, pero es responsabilidad del usuario.

Analizando iconos

De hecho, es como cargar una fuente o tipografía. Si visitamos el link, veremos que hay código CSS:

Tenemos que concentrarnos justamente en donde dice url y carga un archivo con extensión woff2. Si navegamos a ese link (que al menos en mi caso es https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) se nos descargará la fuente. Y podremos guardarla.

Esa fuente es la que trae todos los iconos. Vamos a guardarla en una carpeta de nuestra aplicación web llamada fonts con el nombre de iconos.woff2. Si le cambias el nombre, recuerda cambiarlo también al incluirlo.

Incluyendo fuente descargada

Ahora sí vamos a hacerlo offline, en nuestra app debe haber una carpeta que albergue nuestros estilos css. Pues junto a ella (no dentro de ella, sino en el mismo directorio) crearemos una carpeta llamada fonts.

Si no me entiendes bien, la estructura podría ser así:

Podemos ver que css, fonts y js están juntas. Ahora, a nuestro estilo CSS (que está dentro de la carpeta css) vamos a añadirle el siguiente fragmento de código:

Como podemos ver, es el mismo código que tiene la página de las fuentes de Google, pero con la diferencia de que ahora estamos cargando las fuentes que están un directorio arriba y luego dentro de la carpeta fonts.

Es decir, estamos dentro de la carpeta css. Para cargar la fuente, necesitamos salir de la carpeta o ir un directorio arriba (eso lo hacemos con ../). Una vez que hayamos salido, entramos a fonts y luego cargamos iconos.woff2

Y con eso hemos incluido los iconos offline. Ya sólo falta incluir un link a nuestros estilos css.

Directorio de ejemplo

Si no me expliqué bien, mi directorio está así:

En la carpeta css tengo a estilos.css. Ahí dentro puse el fragmento de código de arriba. Y en fonts tengo los iconos con la extensión woff2. Luego, en mi archivo index.html hago esto:

Resumiendo

En pocas palabras:

  • Descarga la fuente y guárdala con el nombre que desees
  • En tus estilos, añade el segundo fragmento de código que puse en el post. Y en url apunta al directorio en donde hayas descargado la fuente
  • Finalmente incluye tu archivo css que carga la fuente en donde quieras usarlo
Categorías: cssweb

parzibyte

He trabajado por más de 4 años en el desarrollo de software con experiencia en Java, PHP, JavaScript, HTML, Node.JS, Python, Android y Go. También he trabajado con bases de datos SQL como MySQL y SQLite, así como con bases de datos NoSQL usando MongoDB.Soy bueno utilizando algunos frameworks y herramientas como Firebase, jQuery, AngularJS, VueJS, CodeIgniter, Laravel, BulmaCSS, Bootstrap y Electron.Otros términos que conozco son: Arduino, GraphQL, API's, REST, AJAX, PouchDB, CouchDB, Experiencia de usuario, buenas prácticas de programación, Webpack, NPM, Administración de servidores y programación de scriptsLa plataforma en la que tengo más experiencia es la web, pero en mis ratos libres realizo unos pequeños ejercicios en C# y C.Estoy aquí para ayudarte a resolver tus problemas de programación y depuración :-)

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

A %d blogueros les gusta esto: