Práctica de uso de iconos con fuentes descargadas en localmente

URL de interes

Link a GitHub Link a los Iconos

Como instanciarlo

Hay que añadir en una etiqueta Style:

<style>
 @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../font/MaterialIcons-Regular.ttf);
  src: local('Material Icons'),
   local('MaterialIcons-Regular'),
 } </style>

Tambien hay que añadir:

.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';
}

Ejemplo Icono simple

face

Botón

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

Lista con Hipervinculos

• face<span class="material-icons">face</span>
• house<span class="material-icons">house</span>
• settings<span class="material-icons">settings</span>
• accessibility_new<span class="material-icons">accessibility_new</span>

Ejemplo Icono de modificando el tamaño

face

<span class="material-icons md-50">face</span>

Tenemos que crear nuestra propia clase en CSS.

.material-icons.md-50 { font-size: 50px; }


Ejemplo Icono de modificando el color

face

<span class="material-icons md-coloreado">face</span>

Tenemos que crear nuestra propia clase en CSS.

.material-icons.md-coloreado{
  background-color: #5d6d61;
  color: #b0ff57
}