javascript - validacion - ¿Cómo alojar íconos de material fuera de línea?

validar formulario javascript html5

Question

Mis disculpas si esta es una pregunta muy simple, pero ¿cómo se usan los iconos de material de Google sin un

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

?

Me gustaría que mi aplicación pueda mostrar los iconos incluso cuando el usuario no tiene conexión a Internet

Answer 1

Utilice material-design-icons-iconfont

Divulgación completa, soy el autor de este paquete

El proyecto de iconos de diseño de materiales de Google requiere poco mantenimiento y está desactualizado por un tiempo . Hay una brecha entre la versión en here y la versión en material-design-icons .

He creado material-design-icons-iconfont para abordar estos problemas importantes:

• material-design-icons jams npm install : se han eliminado todos los archivos svg / xml / ... irrelevantes
• Los archivos de fuentes siempre están actualizados directamente desde Google Fonts CDN
• Soporte para scss

Instalar a través de npm

npm install material-design-icons-iconfont --save

Depende de cómo empaquete su aplicación web ( webpack / gulp / webpack / ...), necesitará importar el archivo .scss / .scss (y podría cambiar la ruta relativa de las fuentes)

Importar usando SCSS

Importa en uno de tus archivos sass

$material-design-icons-font-path: ''~material-design-icons-iconfont/dist/fonts/'';
@import ''~material-design-icons-iconfont/src/material-design-icons'';

Más adelante, haga referencia al icono deseado <i class="material-icons"> + icon-id + </i>

<i class="material-icons">contact_support</i>

• lea las instrucciones completas en material-design-icons-iconfont para más métodos de importación

Página de demostración

Viene con una página de demostración ligera para ayudar a buscar y copiar fuentes

Answer 2

Actualización de 2019 aquí:

Para alojar sus íconos de material, los regulares, redondeados, agudos, todas las variantes. Ve a buscarlos en este repositorio: https://github.com/petergng/material-icon-font

Por alguna razón, no sé por qué estas fuentes no son fácilmente accesibles desde los repositorios de Google.

Pero aquí tienes.

Después de descargar el paquete, vaya a la carpeta bin y verá las cuatro variantes. Por supuesto, depende de usted usar lo que sea.

Para usarlos, cree un archivo CSS y 1. Genere una fuente para cada variante que necesite:

@font-face {
    font-family: ''Material Icons'';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local(''Material-Icons-Regular''),
    url(./icons/regular/Material-Icons-Regular.woff2) format(''woff2''),
    url(./icons/regular/Material-Icons-Regular.woff) format(''woff''),
    url(./icons/regular/Material-Icons-Regular.ttf) format(''truetype'');
}

@font-face {
    font-family: ''Material Icons Round'';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local(''Material-Icons-Round''),
    url(./icons/round/Material-Icons-Round.woff2) format(''woff2''),
    url(./icons/round/Material-Icons-Round.woff) format(''woff''),
    url(./icons/round/Material-Icons-Round.svg) format(''svg''),
    url(./icons/round/Material-Icons-Round.ttf) format(''truetype'');
}

@font-face {
    font-family: ''Material Icons Sharp'';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local(''Material-Icons-Sharp''),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format(''woff2''),
    url(./icons/sharp/Material-Icons-Sharp.woff) format(''woff''),
    url(./icons/sharp/Material-Icons-Sharp.svg) format(''svg''),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format(''truetype'');
}

La url se vinculará a la ubicación de los iconos en su proyecto.

2. Ahora registremos las clases de íconos:

   .material-icons-outlined, .material-icons { font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; }

Esto hará que las .material-icons-outlined, .material-icons y .material-icons utilicen los mismos valores predeterminados. Si desea utilizar .material-icons-sharp , simplemente agréguelo a los dos nombres de clase.

3. Finalmente, permítanos conectar la fuente que seleccionó en el paso 1.

   .material-icons { font-family: ''Material Icons''; }

   .material-icons-outlined { font-family: ''Material Icons Outline''; }

Nuevamente, para usar más variantes, como Sharp, simplemente agregue su bloque como los dos anteriores.

Una vez hecho esto, vaya a su html y use sus iconos recién acuñados.

<i class="material-icons-outlined">hourglass_empty</i>

<i class="material-icons">phone</i>

Answer 3

Con cli angular

npm install angular-material-icons --save

o

npm install material-design-icons-iconfont --save

material-design-icons-iconfont es la última versión actualizada de los iconos. los iconos de material angular no se actualizan durante mucho tiempo

Espere espere espere a que se realice la instalación y luego agréguelo a angular.json -> proyectos -> arquitecto -> estilos

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

o si instaló material-desing-icons-iconfont entonces

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

Answer 4

Después de haber realizado npm install material-design-icons , agregue esto en su archivo CSS principal:

@font-face {
  font-family: ''Material Icons'';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local(''Material Icons''),
       local(''MaterialIcons-Regular''),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format(''woff2''),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format(''woff''),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format(''truetype'');
}

.material-icons {
  font-family: ''Material Icons'';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: ''liga'';
}

Answer 5

El método Kaloyan Stamatov es el mejor. Primero vaya a fonts.googleapis.com/icon?family=Material+Icons . y copie el archivo css. el contenido se ve así

/* fallback */
@font-face {
  font-family: ''Material Icons'';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format(''woff2'');
}

.material-icons {
  font-family: ''Material Icons'';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: ''liga'';
  -moz-osx-font-smoothing: grayscale;
}

pegue la fuente de la fuente en el navegador para descargar el archivo woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Luego reemplace el archivo en la fuente original. Puede cambiarle el nombre si lo desea No es necesario descargar el archivo de 60 MB de github. Muy simple Mi código se ve así

@font-face {
font-family: ''Material Icons'';
font-style: normal;
font-weight: 400;
src: url(materialIcon.woff2) format(''woff2'');

}

 .material-icons {
    font-family: ''Material Icons'';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: ''liga'';
    -moz-osx-font-smoothing: grayscale;
  }

mientras que materialIcon.woff2 es el archivo woff2 descargado y reemplazado.

Answer 6

El título de la pregunta pregunta cómo alojar íconos de material fuera de línea, pero el cuerpo aclara que el objetivo es usar los íconos de material fuera de línea (énfasis mío) .

Usar su propia copia de los archivos de iconos de material es un enfoque / implementación válido. Otro, para aquellos que pueden usar un trabajador de servicio es dejar que el trabajador de servicio se encargue de ello. De esa manera no tiene la molestia de obtener una copia y mantenerla actualizada.

Por ejemplo, genere un trabajador de servicio usando Workbox , usando el enfoque más simple de ejecutar workbox-cli y aceptando los valores predeterminados, luego agregue el siguiente texto al trabajador de servicio generado:

workboxSW.router.registerRoute(''https://fonts.googleapis.com/(.*)'',
workboxSW.strategies.cacheFirst({
  cacheName: ''googleapis'',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

Luego puede verificar que se almacenó en caché en Chrome usando F12> Aplicación> Almacenamiento> IndexedDB y buscar una entrada con googleapis en el nombre.

Answer 7

En http://materialize.com/icons.html la información del encabezado de estilo que incluye en la página, puede ir al hipervínculo real y hacer copias localizadas para usar los iconos sin conexión.

Aquí se explica cómo: Nota: descargará dos archivos en todos icon.css y somefile.woff .

1. Vaya a la siguiente URL como se requiere en el encabezado

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> .

Guarde la página como whatever_filename.css. El valor predeterminado es icon.css

2. Busca una línea como esta

src: local(''Material Icons''), local(''MaterialIcons-Regular''), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. Visita la URL que tiene .woff terminando

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 . Su navegador lo descargará automáticamente. Guárdelo en su carpeta CSS.

4. Ahora debería tener los dos archivos icon.css y 2fcrYFNa .... mY.wof22 , guárdelos en su css. Ahora realice modificaciones en la ubicación de su encabezado css en icon.css en sus directorios. Solo asegúrese de que el archivo .woff2 esté siempre en la misma carpeta que icon.css. Siéntase libre de editar los nombres largos de archivo.

Answer 8

En mi respuesta, he intentado compilar todo lo que se debe hacer para los iconos de alojamiento propio. Debe seguir estos 4 simples pasos.

1. Abra la carpeta iconfont del repositorio de materializar

   enlace- [ https://github.com/google/material-design-icons/tree/master/iconfont]

2. Descargue estos tres archivos de iconos ->

   MaterialIcons-Regular.woff2 - formato (''woff2'')

   MaterialIcons-Regular.woff - formato (''woff'')

   MaterialIcons-Regular.ttf - formato (''truetype'');

   Nota: después de la descarga, puede cambiarle el nombre a lo que desee.

3. Ahora, vaya a su CSS y agregue este código

@font-face {
  font-family: ''Material Icons'';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local(''Material Icons''),
       local(''MaterialIcons-Regular''),
       url(MaterialIcons-Regular.woff2) format(''woff2''),
       url(MaterialIcons-Regular.woff) format(''woff''),
       url(MaterialIcons-Regular.ttf) format(''truetype'');
}

.material-icons {
  font-family: ''Material Icons'';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: ''liga'';
}

Nota: La dirección proporcionada en src: url (...) debe ser con respecto al ''Archivo CSS'' y no al archivo index.html. Por ejemplo, puede ser src: url (../ myicons / MaterialIcons-Regular.woff2)

4. Ya está listo para usar y así es como se puede hacer en HTML

<i class="material-icons">face</i>

Haga clic here para ver todos los iconos que se pueden usar.

Answer 9

Estoy compilando para Angular 4/5 y, a menudo, trabajo sin conexión, por lo que lo siguiente funcionó para mí. Primero instale el NPM:

npm install material-design-icons --save

Luego agregue lo siguiente a styles.css:

@import ''~material-design-icons/iconfont/material-icons.css'';

Answer 10

Los enfoques superiores no funcionan para mí. Descargué los archivos de github, pero el navegador no cargó las fuentes.

Lo que hice fue abrir el enlace fuente del ícono de material:

fonts.googleapis.com/icon?family=Material+Icons

y vi este marcado:

    /* fallback */
@font-face {
  font-family: ''Material Icons'';
  font-style: normal;
  font-weight: 400;
  src: local(''Material Icons''), local(''MaterialIcons-Regular''), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format(''woff2'');
}

.material-icons {
  font-family: ''Material Icons'';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: ''liga'';
  -moz-osx-font-smoothing: grayscale;
}

Abro el enlace url de fuente woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

y descargue el archivo woff2.

Luego reemplazo la ruta del archivo woff2 con la nueva en material-icons.css

@font-face {
  font-family: ''Material Icons'';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local(''Material Icons''),
       local(''MaterialIcons-Regular''),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format(''woff2''), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format(''woff2''),
       url(iconfont/MaterialIcons-Regular.ttf) format(''truetype'');
}

Eso hace que las cosas funcionen para mí.

Answer 11

Mi receta tiene tres pasos:

1. instalar el paquete material-design-icons

   npm install material-design-icons

2. para importar el archivo material-icons.css en un archivo / proyecto .less o .scss

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

3. para incluir el código recomendado en el archivo / proyecto reactjs .js

   <i className=''material-icons'' style={{fontSize: ''36px''}}>close</i>

Answer 12

Si usa el proyecto webpack, después

npm install material-design-icons --save

solo necesitas

import materialIcons from ''material-design-icons/iconfont/material-icons.css''

Answer 13

Esta puede ser una solución fácil

Obtenga este npmjs.com/package/material-design-icons-iconfont que es una bifurcación del repositorio original que Google publicó.

Instalarlo con bower o npm

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Importe el archivo css en su página HTML

<style>
  @import url(''node_modules/material-design-icons-iconfont/dist/material-design-icons.css'');
</style>

o

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Prueba: agregue un icono dentro de la etiqueta del cuerpo de su archivo HTML

<i class="material-icons">face</i>

Si ve el icono de la cara, está bien.

Si no funciona, intente agregar esto .. como prefijo a la ruta node_modules :

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Answer 14

Método 2. Guía para desarrolladores de alojamiento propio

Download la última versión de github (activos: archivo zip), descomprima y copie la carpeta iconfont, que contiene los archivos de iconos de diseño de materiales, en su proyecto local: Download

Solo necesita usar la carpeta iconfont del archivo: contiene las fuentes de los iconos en los diferentes formatos (para soporte de múltiples navegadores) y css de boilerplate.

• Reemplace la fuente en el atributo url de @ font-face, con la ruta relativa a la carpeta iconfont en su proyecto local, (donde se encuentran los archivos de fuente), por ejemplo. url ("iconfont / MaterialIcons-Regular.ttf")

@font-face {
   font-family: ''Material Icons'';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local(''Material Icons''),
        local(''MaterialIcons-Regular''),
        url(iconfont/MaterialIcons-Regular.woff2) format(''woff2''),
        url(iconfont/MaterialIcons-Regular.woff) format(''woff''),
        url(iconfont/MaterialIcons-Regular.ttf) format(''truetype'');
}

.material-icons {
  font-family: ''Material Icons'';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: ''liga'';
}

<i class="material-icons">face</i>

Paquetes NPM / Bower

Google tiene oficialmente una opción de dependencia de Bower y NPM: siga la Guía de iconos de materiales 1

Usando bower

bower install material-design-icons --save

Usando NPM

npm install material-design-icons --save