Installare le Material Icons sul vostro forum

Da **Niko** Dom 17 Gen 2021 - 1:07

Installare le Material Icons sul vostro forum

Le icone del material design sono icone semplici, moderne, amichevoli e talvolta peculiari. Ogni icona viene creata con il design di Google, utilizzando le sue linee guida per rappresentare e utilizzare facilmente forme minime, il concetto universale comunemente utilizzato nell'interfaccia utente (UI). Leggibilità e chiarezza garantite nelle dimensioni dell'icona, sono state ottimizzate per una visualizzazione elegante su tutte le piattaforme e risoluzioni.

Installazione

Per l'installazione ci sono due metodi alternativi, è possibile sceglierne uno a seconda delle preferenze.

Tramite templates

Andiamo verso Pannello di amministrazione ► Visualizzazione ► Modelli ► Generale ► overall_header

All'interno del contenuto del template cerchiamo {CSS} e subito dopo inseriamo:

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

Tramite Javascript

Se non hai accesso ai templates puoi utilizzare uno script.
Le pagine javascript attive nel tuo forum ti permettono di inserire script e jQuery per personalizzare il tuo forum, tuttavia è importante sapere che qualsiasi script trovato su internet non finisce per apparire nei forum.

Andiamo verso Pannello di amministrazione ► e creiamo un nuovo codice Javascript con queste impostazioni:

Titolo: a tua scelta
Dove: In tutte le pagine
Codice:
Codice:
document.write('<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">');

Elenco delle icone disponibili

Ci sono centinaia di icone in cui puoi vederle da questo sito:

Material.io

Come funziona?

L'utilizzo è molto simile all'uso di FontAwesome, ma non usiamo class="fa fa- *" e semplicemente il nome all'interno del tag . L'icon_name_icon può essere visto sul sito web di cui sopra nel punto 2 .

HTML e BBcode

Le icone possono essere utilizzate nel tuo foglio HTML nel modo seguente:

Codice:: <i class="material-icons">chat_bubble_outline</i>

E nel BBCode:

Codice:: [font=material icons]chat_bubble_outline[/font]

Pseudo-elemento CSS

L'uso delle icone è consentito anche nei selettori :: after e :: before , che avranno questo aspetto:

Codice:: .elemento::after { font-family: 'Material Icons'; content: 'chat_bubble_outline' }

FAQ - Domande e risposte frequenti

Perché usare le icone dei materiali?
L'utilizzo di queste icone facilita enormemente l'utente, ed è affidabile al 100%, non scompaiono mai e ricevono aggiornamenti senza dover fare nulla.
Puoi smettere di usare le parole e iniziare a usare una semplice icona, le icone sono immagini internazionali, se siamo portoghesi o asiatici lo noteremo entrambi. Le icone sono fantastiche visivamente, perché si adattano facilmente a un'interfaccia utente.
Material Icons La compatibilità è la migliore fonte di icone per la compatibilità con i browser, arrivano fino a IE6.
Sono compatibili con telefoni cellulari o tablet.
Pro e contro
PRO Progettato secondo le linee guida del Material Design.
PRO Come con qualsiasi carattere ospitato da Google Web Fonts, è semplice da usare. Può essere ospitato oppure puoi includere una singola riga di HTML.
PRO Veloce e leggero.
PRO Le icone sono open source e gratuite.

CONTRO Alcune icone sono brutte.
CONTRO Poche icone sono più mirate per essere utilizzate nel contesto del dispositivo mobile.
Icone materiali o carattere
Le icone dei materiali sono nella seconda posizione delle icone più utilizzate, essendo FontAwesome che occupa la prima posizione, questo chiaro a causa di diversi fattori che Font Awesome rende disponibili.
Qualche versione di Forumeiros usa queste icone?
Sì! L'ultima versione utilizzata da AwesomeBB . Curiosità: ModernBB utilizza Ion Icons.