Menu apenas em font awesome

Detalhes da questão

Endereço do fórum: http://inpanemwetrust.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Boa tarde!

Tenho duas questões relacionadas a serem resolvidas:

1ª: Como posso fazer com que o meu menu seja construído apenas com Font Awesome, sem os links estarem acompanhados das palavras: inicio, perfil, grupos e etc...?

2ª: Para este mesmo menu, consegui adicionar font Awesome com o código:

Código:

.mainmenu > img {
  display: none;
}
 
a.mainmenu::before {
  content: "\f015";
  font-family: FontAwesome;
  display: inline;
  font-color: #fff;
  margin-right: 5px;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 25px;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
a.mainmenu[href*="memberlist"]::before {
  content: "\f0c0";
}
 
a.mainmenu[href*="profile?mode=editprofile"]::before {
  content: "\f2c2";
}

a.mainmenu[href*="privmsg?folder=inbox"]::before {
  content: "\f0e0";
}


Gostaria de saber quais variáveis devo usar para adicionar diferentes ícones para login e logout e para mostrar um ícone em Font Awesome diferente quando houver novas mensagens.

OBS: Quando falo variáveis, me refiro ao link [href*="variável"].

Obrigada desde já!

Boa tarde!

Considerando a sua primeira questão, acede a Painel de Controle >> Visualização >> Página inicial >> Cabeçalho & Navegação e em "Exibir apenas as imagens no menu de navegação", selecione a opção Sim.

Quanto à sua outra questão, crie um novo tópico, tendo em vista que só é viável uma dúvida por tópico.

Atenciosamente,
Fraise.

Tópico movido de 'Questões sobre códigos' para 'Questões sobre o painel de administração'

Olá, as novas mensagens se refere a isto?

Código:

.new-message:before {
    color: red;
}

Isso vai deixar a cor em vermelho da nova mensagem..

Teste para ver o mesmo.

Ah, quando se refere a variáveis está especificando atributos que estão inclusos no html da página.

Se olhar bem o seguinte código:

Código:

[href^="/register"] /* Se registrar-se */
[href^="/login"]   /* Login ou conectar */
[href^="/login?logout="]   /* Sair da conta */



De uma forma simples são links que estão no menu do seu fórum, se clicar no lado direito e copiar link vai conseguir completar o código referente ao menu.

Ex:
http://inpanemwetrust.forumeiros.com/login

/login

Ajudeiro, 
Virus.

Muito obrigada Fraise, funcionou!

Oi Virus, a cor do icone da nova mensagem não mudou com o código que você me passou.
Também não funcionaram os links para login e logout, ficou aparecendo apenas um quadro branco no lugar do ícone.

https://prnt.sc/j8mq17

Pode ser a versão do fontawesome.
A atual que está implementada em seu fórum e a 4.7.0

Se me engano você pegou essa: https://fontawesome.com/icons/sign-in-alt?style=solid

Que é font awesome 5.0

Veja para 4.7.0:
https://fontawesome.com/v4.7.0/icons/

Pode atualizar para o 5.0, mas ai teria que trocar o link :X

Até mais.

Perfeito, muito obrigada mesmo! Agora só falta mudar a cor do ícone quando tiver uma nova mensagem.

Você pode me ajudar com isso também?

PrettyGirl escreveu:Perfeito, muito obrigada mesmo! Agora só falta mudar a cor do ícone quando tiver uma nova mensagem.

Você pode me ajudar com isso também?

Retire o seu fórum de manutenção para que eu possa verificar uma coisa
Sorry :9 Disponibilize uma conta não consigo criar uma conta em seu fórum.

Acabei de autorizar a inscrição de novos membros.

\o/ Siga esses passos para liberar a inscrição:
Painel de Controle Usuários & Grupos Usuários Opções dos usuários
Autorizar as novas inscrições : Sim

Quando liberar me avisa  

já está autorizado!

@PrettyGirl o seu fórum ainda não consigo me registrar poderia criar uma conta teste para mim?

Agradeço se criar. E ainda está bloqueado a inscrição provável que não tenha salvado ;o ou tenha outra opção atrapalhando.
Painel de Controle Geral Fórum Configuração
Fórum de férias : Não.
E Salve.

Ajudeiro,
Virus.

Enviei a conta por MP!

Não consegui fazer via CSS acredito que seja por causa de algumas limitações por não ser uma imagem por exemplo.

Vai em:
Painel de Controle Módulos HTML & JAVASCRIPT Gestão dos códigos JavaScript
Criar um novo Javascript
Titulo: Qualquer
Investimento: Em todas  as páginas.

E adicione o seguinte código:

Código:

(function($){
    var newmessager = $('.'+'new-message');
    newmessager
        .closest('a.mainmenu[href="/privmsg?folder=inbox"]')
        .css("color", "red");
})(jQuery);



 
Até e edite a parte red  por uma cor em hexadecimal ex: #123456 e deixe entre as aspas assim como o red está.
Color Picker


Ajudeiro,
Virus.

Não funcionou

Hi, troca o código do Virus por esse:

Código:

$(function(){
 $('.new-message').parents('a.mainmenu').css('color', 'red');
});

E se não funcionar, faz o que eu te pedi por mp - conta - please.

Funcionou, muito obrigada!