Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
202 usuários online :: 7 usuários cadastrados, Nenhum Invisível e 195 Visitantes :: 2 Motores de busca

adamonofre, Br_SP_Rodrigo, Claudio Arthur, Kyo Panda, Lobs, Mythology, Neji

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Duvidas sobre FontAwesome

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

Resolvido Duvidas sobre FontAwesome

Mensagem por Jhool em Ter 14 Mar 2017 - 0:38

Detalhes da questão


Endereço do fórum: http://familiawarning.forumeiros.com
Versão do fórum: PunBB

Descrição


Eu instalei este sistema em meu fórum e não estou sabendo usar corretamente, gostaria de saber como colocar os icones ao lado de algumas coisas:

- Icones ao lado do texto da categoria
http://prntscr.com/ejn0fh
Fórum em que vi: http://brasilplayultimate.forumeiros.com/forum

- Icones ao lado de cada LINK do menu
http://prntscr.com/ejn0nh
Fórum em que vi: http://bpcsamp.com.br/forum/


E algum tutorial mostrando o que eu posso fazer com este sistema, pois eu coloquei no meu fórum e procurei diversos tutoriais para aprender a usa-las e não consegui encontrar, agradeço desde já !
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 11/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum
  • 0

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Harleen em Ter 14 Mar 2017 - 1:38

@Jhool escreveu:
- Icones ao lado de cada LINK do menu
http://prntscr.com/ejn0nh

Adicione no início de sua folha CSS o seguinte código
Código:
#pun-navlinks li a.mainmenu:before {
    font-family: FontAwesome;
    font-size: 130%;
    padding-right: 3px;
    padding-left: 3px;
}
#pun-navlinks li a.mainmenu[href="/forum"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/"]:before {
    content: "";
}
#pun-navlinks a.mainmenu[href="/calendar"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/faq"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/search"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/memberlist"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/groups"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/profile?mode=editprofile"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/privmsg?folder=inbox"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/login"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href^="/login?logout=1"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/register"]:before {
    content: "";
}

Resultado http://prntscr.com/ejnfzr
Procure mais ícones no site do fontawesome Positivo

Até mais
avatar

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 696
Pontos Ativos : 1113

http://antenadogames.forumeiros.com/

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Jhool em Ter 14 Mar 2017 - 3:07

@Harleen escreveu:
@Jhool escreveu:
- Icones ao lado de cada LINK do menu
http://prntscr.com/ejn0nh

Adicione no início de sua folha CSS o seguinte código
Código:
#pun-navlinks li a.mainmenu:before {
    font-family: FontAwesome;
    font-size: 130%;
    padding-right: 3px;
    padding-left: 3px;
}
#pun-navlinks li a.mainmenu[href="/forum"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/"]:before {
    content: "";
}
#pun-navlinks a.mainmenu[href="/calendar"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/faq"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/search"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/memberlist"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/groups"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/profile?mode=editprofile"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/privmsg?folder=inbox"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/login"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href^="/login?logout=1"]:before {
    content: "";
}
#pun-navlinks li a.mainmenu[href="/register"]:before {
    content: "";
}

Resultado http://prntscr.com/ejnfzr
Procure mais ícones no site do fontawesome Positivo

Até mais

Resultou ficou bom, poderia me ajudar com a outra questão também?
- Icones ao lado do texto da categoria
http://prntscr.com/ejn0fh
Fórum em que vi: http://brasilplayultimate.forumeiros.com/forum
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 11/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum
  • 0

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Kyo Panda em Ter 14 Mar 2017 - 12:25

@Jhool escreveu:- Icones ao lado do texto da categoria
http://prntscr.com/ejn0fh
Fórum em que vi: http://brasilplayultimate.forumeiros.com/forum

Adicione um novo Javascript com Investimento em Todas as páginas:

Código:
(function($) {
  'use strict';

  var config = {
    selector: '.page-title h2',
    categories: [{
      title: 'Geral',
      icon: 'star-half-o',
    }, {
      title: 'Recrutamento',
      icon: 'star-half-o',
    }, {
      title: 'Designer',
      icon: 'star-half-o',
    }, {
      title: 'Galeria/Mídia',
      icon: 'star-half-o',
    }, {
      title: 'Downloads',
      icon: 'star-half-o',
    }, {
      title: 'Outros',
      icon: 'star-half-o',
    }]
  };

  $(function() {
    $.each(config.categories, function(index, item) {
      $('<i>', { class: 'fa fa-' + item.icon })
        .prependTo(config.selector + ':contains("' + item.title + '")')
      ;
    });
  });
}(jQuery));

Nessa parte do script:

Código:
    categories: [{
      title: 'Geral',
      icon: 'star-half-o',
    }, {
      title: 'Recrutamento',
      icon: 'star-half-o',
    }, {
      title: 'Designer',
      icon: 'star-half-o',
    }, {
      title: 'Galeria/Mídia',
      icon: 'star-half-o',
    }, {
      title: 'Downloads',
      icon: 'star-half-o',
    }, {
      title: 'Outros',
      icon: 'star-half-o',
    }]

Você configura as categorias e os ícones. Você pode ver os ícones no site do FontAwesome.

E adicione ao seu CSS:

Código:
.page-title h2 .fa {
    font-size: 16px;
    margin-right: 5px;
}

o/


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3334
Pontos Ativos : 4630

http://ajuda.forumeiros.com

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Jhool em Ter 14 Mar 2017 - 20:03

Resultou, obrigado KYo e Harleen !
avatar

Jhool
Nível 8

Masculino
Inscrito dia : 11/01/2017
Mensagens : 128
Pontos Ativos : 210

http://familiawarning.forumeiros.com/forum

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Kyo Panda em Ter 14 Mar 2017 - 20:04

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".


Bem vindo ao Fórum dos Fóruns. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3334
Pontos Ativos : 4630

http://ajuda.forumeiros.com

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

- Tópicos similares

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