Duvidas sobre FontAwesome

3 participantes

Ir para baixo

Tópico resolvido Duvidas sobre FontAwesome

Mensagem por Jhool 14.03.17 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á !
Jhool
Jhool
****

Membro desde : 11/01/2017
Mensagens : 379
Pontos : 601

http://familiawarning.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Duvidas sobre FontAwesome

Mensagem por Harleen 14.03.17 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
Harleen
Harleen
Super Membro

Membro desde : 09/07/2012
Mensagens : 1779
Pontos : 2373

https://antenadogames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Duvidas sobre FontAwesome

Mensagem por Jhool 14.03.17 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
Jhool
Jhool
****

Membro desde : 11/01/2017
Mensagens : 379
Pontos : 601

http://familiawarning.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Duvidas sobre FontAwesome

Mensagem por Kyo Panda 14.03.17 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/
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Duvidas sobre FontAwesome

Mensagem por Jhool 14.03.17 20:03

Resultou, obrigado KYo e Harleen !
Jhool
Jhool
****

Membro desde : 11/01/2017
Mensagens : 379
Pontos : 601

http://familiawarning.forumeiros.com/forum

Ir para o topo Ir para baixo

Tópico resolvido Re: Duvidas sobre FontAwesome

Mensagem por Kyo Panda 14.03.17 20:04

Duvidas sobre FontAwesome  Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
Kyo Panda
Kyo Panda
Hiper Membro

Membro desde : 08/01/2012
Mensagens : 4641
Pontos : 5939

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos