[TUTORIAL] Como instalar Material Icons no fórum

por **tikky** 22.09.18 10:55

Como instalar Material Icons no fórum

Material design icons são ícones simples, modernos, amigáveis e às vezes peculiar. Cada ícone é criado com o design da Google, usando às suas diretrizes para retratar facilmente e usar formas minímas o conceito universal usado comummente em toda a interface do usuário (UI). Garantido a legibilidade e clareza no tamanho do ícone, os mesmos foram otimizados para uma exibição elegante em todas às plataformas e resoluções.

Como instalar Material Icons no fórum

TUTORIAIS, DICAS E ASTÚCIAS

Instalação

Via template

Painel de Controle  Visualização  Templates  Geral  overall_header

(clique na imagem para aumentar)

[TUTORIAL] Como instalar Material Icons no fórum Cp_tpl10

[TUTORIAL] Como instalar Material Icons no fórum 110111

 overall_header : Você deve clicar em  deste template e procurar e trocar os códigos apresentados logo abaixo.

Dentro do template, encontre a variável {CSS}, e adicione o seguinte código em baixo dessa variável.

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

Via JavaScript

Se não tiveres acesso aos templates podes usar um script.
As páginas javascript ativas em seu fórum possibilita inserir scripts e jQuery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de Controle  Módulos  HTML e Javascript  Gestão dos códigos Javascript  Criar uma nova página JavaScript

(clique na imagem para aumentar)

[TUTORIAL] Como instalar Material Icons no fórum Javaac10

 Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

[TUTORIAL] Como instalar Material Icons no fórum 110210

 Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

[TUTORIAL] Como instalar Material Icons no fórum 110310

 Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas às páginas.

[TUTORIAL] Como instalar Material Icons no fórum 110410

 Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Código:

Código:: document.write('<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">');

Lista de ícones

Existe centenas de ícones no qual podes ver eles deste site:

Material.io

Como funcionam

O uso é muito semelhante ao uso do FontAwesome porém não usamos class="fa fa-*" e simplesmente o nome dentro da tag <i class="material-icons">nome_do_icon</i>. O nome_do_icon do ícone podes ver no site em cima na etapa 2.

HTML e BBCode

Os ícones são possíveis usar na sua folha HTML na seguinte forma:

Código:: <i class="material-icons">chat_bubble_outline</i>

E em BBCode:

Código:: [font=material icons]chat_bubble_outline[/font]

Pseudo-elemento CSS

O uso dos ícones também é permitido nos selectors ::after e ::before, que ficará algum assim:

Código:: .elemento::after { font-family: 'Material Icons'; content: 'chat_bubble_outline' }

FAQ

Porquê usar Material Icons?
O uso deste ícones facilita muito o usuário, e é 100% fiável, elas nunca desaparecem e recebem atualizações sem necessitares de fazer nada.
Podes parar de usar palavras e começar a usar um simples ícone, os ícones são imagens internacionais, que sejamos nós português ou asiáticos ambos vamos perceber. Os ícones são ótimos visualmente, porque se encaixam facilmente em uma interface de um usuário.
Compatibilidade
Material Icons é a melhor fonte de ícones para a compatibilidade com os navegadores, elas vão até o IE6.
São compatíveis com telemóveis ou tablets.
Pros e contras
PROS Projetado sob as diretrizes do Material Design.
PROS Como acontece com qualquer fonte hospedada pelo Google Web Fonts, é simples de usar. Pode ser hospedado ou podes incluir uma única linha de HTML.
PROS Rápida e é leve.
PROS Os ícones são de código aberto e livres para usar.

CONTRAS Alguns ícones são feios.
CONTRAS Poucos ícones, são mais direcionados para serem usados no contexto do dispositivo móvel.
Material Icons ou FontAwesome?
Os Material Icons estão na posição 2º dos ícones mais usados, sendo que o FontAwesome ocupa a posição 1º, isso claro devido a vários fatores que o Font Awesome disponibiliza.
Alguma versão da Forumeiros usa estes ícones?
Sim! A mais recente versão AwesomeBB usa. Curiosidade: ModernBB usa Ion Icons.