Installare le Material Icons sul vostro forum


Tutorial Installare le Material Icons sul vostro forum

Messaggio 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:


Come funziona?

L'utilizzo è molto simile all'uso di FontAwesome, ma non usiamo class="fa fa- *" e semplicemente il nome all'interno del tag icon_name. 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.



Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8862
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto

- Argomenti simili

 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.