Duvidas sobre FontAwesome

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

Resolvido Duvidas sobre FontAwesome

Mensagem por Jhool em 13/03/17, 09:38 pm

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 9

Masculino
Inscrito dia : 10/01/2017
Mensagens : 171
Pontos Ativos : 275

Ver perfil do usuário http://familiawarning.forumeiros.com/forum
  • 0

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Harleen em 13/03/17, 10:38 pm

@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
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1535
Pontos Ativos : 1992

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/ https://go.topicit.net/ZosT/ZanjVxxqwI

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Jhool em 14/03/17, 12:07 am

@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 9

Masculino
Inscrito dia : 10/01/2017
Mensagens : 171
Pontos Ativos : 275

Ver perfil do usuário http://familiawarning.forumeiros.com/forum
  • 0

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Kyo Panda em 14/03/17, 09:25 am

@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/
avatar

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Jhool em 14/03/17, 05:03 pm

Resultou, obrigado KYo e Harleen !
avatar

Jhool
Nível 9

Masculino
Inscrito dia : 10/01/2017
Mensagens : 171
Pontos Ativos : 275

Ver perfil do usuário http://familiawarning.forumeiros.com/forum

Resolvido Re: Duvidas sobre FontAwesome

Mensagem por Kyo Panda em 14/03/17, 05:04 pm

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

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

Kyo Panda
Super usuário

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4638
Pontos Ativos : 5914

Ver perfil do usuário 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