[TUTORIAL] Como instalar Material Icons no fórum

[tikky]

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)  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)  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: 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.

Tutorial feito por @pedxz Se você tiver a respeito deste tutorial, queira criar um novo tópico com o título: Como instalar Material Icons no fórum