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.
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.
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.
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í:
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.
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:
En pocas palabras:
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.