Duvidas sobre FontAwesome

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

Até mais

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

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

Resultou, obrigado KYo e Harleen !