[TUTORIAL] Como instalar Material Icons

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

[TUTORIAL] Como instalar Material Icons

Mensagem por Pedxz em 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 comumente 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

(carregue na imagem para aumentar)


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 um novo javascript
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.
Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.
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.
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:


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 & 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.

Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2574
Pontos Ativos : 3250

Ver perfil do usuário https://pedxz.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum