Come usare le Google Material icons

csw0-blog-google-material-icons-cover

Non c’è cosa più bella di poter utilizzare risorse gratuite e soprattutto fatte davvero bene!

E stavolta parliamo di Google che, come al solito, non finisce mai di stupirci mettendoci a disposizione questa incredibile quantità di icone vettoriali dal design straordinario!

Una manna dal cielo per chi è alla ricerca di sviluppare un design di tendenza e davvero professionale.

Vorresti utilizzarle anche tu?

Niente di più semplice!

Come utilizzare queste fantastiche icone?

Segui questi semplici passaggi e in men che non si dica potrai cominciare a divertirti anche tu!

  1. Prima di tutto è doveroso incorporare questo pezzo di codice all’interno della sezione head della tua pagina HTML (selezionalo, copialo ed incollalo):
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  2. Successivamente clicca su questo link dove troverai tutte le Material icons disponibili (scorri nella pagina verso il basso e comincerai a vedere tutte le icone catalogate per categoria)
  3. Clicca sull’icona desiderata e dal basso apparirà un pannello (vedi immagine sotto, punto 1)
  4. In questo pannello clicca su < > ICON FONT (vedi immagine sotto, punto 2)
  5. Copia la seconda riga di codice dello STEP 2 (vedi immagine sotto, punto 3)
  6. Incolla il codice appena copiato nella tua pagina HTML

csw0-blog-google-material-icons-steps

Fatto!

Nulla di più semplice!

Codice sorgente e demo

Eccoti il codice completo e funzionante (compatibile con tutti i browser più moderni):

<!DOCTYPE html>
  <html>
    <head>
    <title>Crea Siti Web da Zero! | Google Material icons</title>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

    <body>
      <i class="material-icons">alarm</i>
    </body>
</html>

Demo

Se vuoi imparare a realizzare un sito web partendo da zero o se vuoi migliorare le tue capacità di sviluppo e design, dai un’occhiata qui: inserendo nome ed e-mail potrai accedere a 3 video gratuiti che ti spiegheranno passo-passo come creare una pagina web in HTML. DA non perdere!

Percorri da subito la strada giusta, senza perdite di tempo.

Guarda adesso questi video Gratuiti e potrai iniziare a seguire un percorso formativo, unico nel suo genere e potente per le semplici informazioni che, in maniera ordinata, riceverai.

Come usare le Google Material icons

Guarda questo video per realizzare siti web professionali e responsive


Commenti Facebook