Sto usando materializecss. Ma non riesco a far funzionare le icone dice la parola ma non mostra l'icona?Le icone di materializecss non funzionano?
Ho incluso il materializecss ei js, ma ancora non funziona ...
Qualcuno sa come risolvere questo problema?
è necessario includere le icone con questo link:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
posto da qualche parte nella tua testa e funzionerà!
È possibile eseguire le seguenti operazioni per rendere l'icona -
aggiungere questo link nella tua pagina html - <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
aprire il browser e vedrete che l'icona ha reso. ma non vogliamo che l'icona sia resa usando googleapis.
aprire la console e andare al src di google apis e aprire il file css e copiare l'intero css e aggiungere il css in un file css o materialize.min.css.
vedrai l'url del carattere nel css che hai appena copiato, apri l'url nel browser e il file del formato woff2 verrà scaricato.
ora basta copiare il file nella cartella dei caratteri e cambiare l'src del font nel file css per puntare a questo file.
Aggiorna la pagina, vedrai che l'icona è stata renderizzata.
Grazie
Molto utile per risparmiare tempo evitando di fare troppe richieste a google api. Anche se il tuo sito non ha bisogno di connessione a Internet. –
Se avete intenzione di utilizzare l'icona non dimenticare di aggiungere CDN. Se non hai intenzione di usare CDN devi scaricare i file delle icone e mappare con il tuo codice.
CDN per il materiale Icone
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
seguenti tag può essere utilizzato per indicare le icone del materiale.
Per ulteriori dettagli, fare riferimento a questo collegamento ufficiale. Material-icons
Di seguito è riportato un esempio di snippet di codice funzionante con poche icone.
<!DOCTYPE html>
<html>
\t <head>
\t <title>ICON</title>
\t <!-- include material-icons -->
\t <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
\t <!--Let browser know website is optimized for mobile-->
\t <meta name="viewport" content="width=device-width, initial-scale=1.0" />
\t </head>
\t <body class="row">
\t \t \t <div class="col s12" >
\t \t \t \t <i class="material-icons">add</i>
\t \t \t \t <i class="material-icons">thumb_up</i>
\t \t \t \t <i class="material-icons">shopping_cart</i>
\t \t \t \t <i class="material-icons">perm_identity</i> \t \t \t
\t \t \t </div>
\t </body>
</html>
Grazie ancora una volta! – Aapje
non è un problema;) –
Oh, questo è un brutto! Grazie! Tuttavia, di cosa si tratta? Scarichiamo qualcosa da Google in questo modo? O vogliono solo tenere traccia di ciò che stiamo usando?Cosa succede se ho intenzione di distribuire il mio sito su un ambiente disconnesso (intranet di sicurezza rigorosa)? –