Adicionar ícones da FontAwesome na Barra de Navegação

Ir para baixo

Tópico resolvido Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 7:06

Detalhes da questão


Endereço do fórum: http://Etcetera.forumotion.com
Versão do fórum: phpBB3

Descrição


como fazer ícone de navbar com fonte awersome?
basta ver a imagem abaixo. Eu estou querendo como este
Adicionar ícones da FontAwesome na Barra de Navegação 20190312

no entanto eu tenho ícone para nova mensagem privada usando fonte awersome no link abaixo.
https://ajuda.forumeiros.com/t113777-personalizar-nova-mensagem-privada

Então, existe alguma maneira de colocar icom antes de cada barra de navegação do meu fórum usando a fonte awerome? desde já, obrigado
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 9:52

Olá,
Adicione este código JavaScript, com investimento em todas as páginas:
Código:
       $(function() {
        $('a.mainmenu:contains("Home")').addClass("hm");
        $('a.mainmenu:contains("Calender")').addClass("dt");
 $('a.mainmenu:contains("FAQ")').addClass("faq");
        $('a.mainmenu:contains("Search")').addClass("search");
        $('a.mainmenu:contains("MEMBERLIST")').addClass("ml");
        $('a.mainmenu:contains("Usergroups")').addClass("ug");
 $('a.mainmenu:contains("Register")').addClass("rg");
 $('a.mainmenu:contains("Login")').addClass("lg");
        });
Agora, adicione este código ao seu CSS:
Código:
.mainmenu::before {font-family: "Font Awesome 5 Free";}.mainmenu.hm::before {content: '\f015 ';}.mainmenu.dt::before {content: '\f073 ';}.mainmenu.faq::before {content: '\f0e6 ';}.mainmenu.search::before {content: '\f002 ';}.mainmenu.ml::before {content: '\f0c0 ';}.mainmenu.ug::before {content: '\f2b9 ';}.mainmenu.rg::before {content: '\f234 ';}.mainmenu.lg::before {content: '\f090 ';}

Cordialmente,
Roger123
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 10:24

não está funcionando. pode ser problema no css? instalei fontawersome mas ainda não está funcionando
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 10:35

Troque o código CSS que lhe passei por este:
Código:
.mainmenu::before {font-family: "Font Awesome 5 Free";}.mainmenu.hm::before {content: '\f015 ';}.mainmenu.dt::before {content: '\f133 ';}.mainmenu.faq::before {content: '\f129 ';}.mainmenu.search::before {content: '\f002 ';}.mainmenu.ml::before {content: '\f0c0 ';}.mainmenu.ug::before {content: '\f2b9 ';}.mainmenu.rg::before {content: '\f234 ';}.mainmenu.lg::before {content: '\f2f6 ';}
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 11:03

agora mostrando este
Adicionar ícones da FontAwesome na Barra de Navegação 20190310

Eu acho que preciso instalar fontawersome para isso? Por favor, compartilhe-me link de instalação de fonte awersome. Eu tenho velho fonawersome. pode ser que não esteja funcionando
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 11:13

Aceda a Painel de Controle Seta Geral Seta Fórum Seta Configuração Seta Descrição do Site e cole este código:
Código:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 22.03.19 11:19

está funcionando, mas alguns navbar não está funcionando.
Eu não vejo ícone antes do calendário, memberlist, perfil, log in / log out ... eu acho que há um problema no script java? por favor, olhe novamente, obrigado
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 23.03.19 18:23

Olá, eu acho que há um problema no script java é por isso que ícone para calendário, perfil, lista de membros, log in / log out não estão funcionando af tudo. você precisa fazer correção
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 9:53

Troque o código CSS para:
Código:
        .mainmenu::before {font-family: "Font Awesome 5 Free";}.mainmenu.hm::before {content: '\f015 ';}.mainmenu.dt::before {content: '\f073 ';}.mainmenu.faq::before {content: '\f129 ';}.mainmenu.search::before {content: '\f002 ';}.mainmenu.ml::before {content: '\f0c0 ';}.mainmenu.ug::before {content: '\f2b9 ';}.mainmenu.rg::before {content: '\f234 ';}.mainmenu.lg::before {content: '\f2f6 ';}
Troque o script para:
Código:
              $(function() {
                $('a.mainmenu:contains("Home")').addClass("hm");
                $('a.mainmenu:contains("Calendar")').addClass("dt");
        $('a.mainmenu:contains("FAQ")').addClass("faq");
                $('a.mainmenu:contains("Search")').addClass("search");
                $('a.mainmenu:contains("Memberlist")').addClass("ml");
                $('a.mainmenu:contains("Usergroups")').addClass("ug");
        $('a.mainmenu:contains("Register")').addClass("rg");
        $('a.mainmenu:contains("Log in")').addClass("lg");
                });

Cordialmente,
Roger123
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 12:01

Olá, estamos muito perto de resolver este problema. apenas a opção "perfil" "mensagem" e "sair" não está funcionando. que se você entrar no fórum, você não verá nenhum ícone para perfil, mensagem e login. por favor crie uma conta em http://etcetera.forumotion.com e você entenderá este problema claramente, Mais uma vez obrigado por você.
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 12:50

Preciso duma conta teste sem poderes administrativos.

Fico no aguardo.
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 13:11

Basta enviar sua conta de teste com acesso de administrador. por favor corrija o navbar. deve estar no meio. Também vejo algum problema no bar cetegory
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 13:20

Como referi, a conta não deve ter poderes administrativos.


Voltando à questão, troque o script para:
Código:
              $(function() {
                $('a.mainmenu:contains("Home")').addClass("hm");
                $('a.mainmenu:contains("Calender")').addClass("dt");
        $('a.mainmenu:contains("FAQ")').addClass("faq");
                $('a.mainmenu:contains("Search")').addClass("search");
                $('a.mainmenu:contains("MEMBERLIST")').addClass("ml");
                $('a.mainmenu:contains("Usergroups")').addClass("ug");
        $('a.mainmenu:contains("Register")').addClass("rg");
        $('a.mainmenu:contains("Login")').addClass("lg");
        $('a.mainmenu:contains("Profile")').addClass("pf");
        $('a.mainmenu:contains("You have no new messages")').addClass("yh");
        $('a.mainmenu:contains("Log Out")').addClass("lo");
                });
Adicione mais este código no seu CSS:
Código:
.mainmenu.pf::before {content: '\f2c2 ';}.mainmenu.yh::before {content: '\f658 ';}.mainmenu.lo::before {content: '\f2f5 ';}
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 13:27

adicionado, mas não está funcionando, por favor, verifique o fórum
calendário, membro, fazer login / logout não está funcionando
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 13:43

Troque o JavaScript por este:
Código:
                     $(function() {
                        $('a.mainmenu:contains("Home")').addClass("hm");
                        $('a.mainmenu:contains("Calendar")').addClass("dt");
                $('a.mainmenu:contains("FAQ")').addClass("faq");
                        $('a.mainmenu:contains("Search")').addClass("search");
                        $('a.mainmenu:contains("Memberlist")').addClass("ml");
                        $('a.mainmenu:contains("Usergroups")').addClass("ug");
                $('a.mainmenu:contains("Register")').addClass("rg");
                $('a.mainmenu:contains("Log in")').addClass("lg");
        $('a.mainmenu:contains("Profile")').addClass("pf");
        $('a.mainmenu:contains("You have no new messages")').addClass("yh");
        $('a.mainmenu:contains("Log out")').addClass("lo");
                        });
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 13:49

todos estão funcionando bem, exceto o logout. logout ainda não está funcionando. e observe que deve haver pouco espaço / lacuna entre o ícone e a barra de navegação. por exemplo ícone espaço Início, log in / logout do espaço do ícone. obrigado
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 13:53

Troque para:
Código:
                            $(function() {
                                $('a.mainmenu:contains("Home")').addClass("hm");
                                $('a.mainmenu:contains("Calendar")').addClass("dt");
                        $('a.mainmenu:contains("FAQ")').addClass("faq");
                                $('a.mainmenu:contains("Search")').addClass("search");
                                $('a.mainmenu:contains("Memberlist")').addClass("ml");
                                $('a.mainmenu:contains("Usergroups")').addClass("ug");
                        $('a.mainmenu:contains("Register")').addClass("rg");
                        $('a.mainmenu:contains("Log in")').addClass("lg");
                $('a.mainmenu:contains("Profile")').addClass("pf");
                $('a.mainmenu:contains("You have no new messages")').addClass("yh");
                $('a.mainmenu:contains("Log out")').addClass("lo");
                                });

Agora, troque o CSS para:
Código:
                .mainmenu::before {font-family: "Font Awesome 5 Free";}.mainmenu.hm::before {content: '\f015  ';}.mainmenu.dt::before {content: '\f073  ';}.mainmenu.faq::before {content: '\f129  ';}.mainmenu.search::before {content: '\f002  ';}.mainmenu.ml::before {content: '\f0c0  ';}.mainmenu.ug::before {content: '\f2b9  ';}.mainmenu.rg::before {content: '\f234  ';}.mainmenu.lg::before {content: '\f2f6  ';}        .mainmenu.pf::before {content: '\f2c2 ';}.mainmenu.yh::before {content: '\f658  ';}.mainmenu.lo::before {content: '\f2f5  ';}
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 14:11

uau tudo funcionando bem agora. só precisa de espaço entre bit "perfil" e ícone. Eu quis dizer: perfil do espaço do ícone. Até logo obrigado
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 14:13

Troque o código css por este:
Código:
                        .mainmenu::before {font-family: "Font Awesome 5 Free";}.mainmenu.hm::before {content: '\f015  ';}.mainmenu.dt::before {content: '\f073  ';}.mainmenu.faq::before {content: '\f129  ';}.mainmenu.search::before {content: '\f002  ';}.mainmenu.ml::before {content: '\f0c0  ';}.mainmenu.ug::before {content: '\f2b9  ';}.mainmenu.rg::before {content: '\f234  ';}.mainmenu.lg::before {content: '\f2f6  ';}        .mainmenu.pf::before {content: '\f2c2  ';}.mainmenu.yh::before {content: '\f658  ';}.mainmenu.lo::before {content: '\f2f5  ';}

Cordialmente,
Roger123
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 14:27

tópico é terminado com sucesso, arquivar como resolvido, obrigado e você o melhor obrigado
Anonymous
Convidado
Convidado


Ir para o topo Ir para baixo

Tópico resolvido Re: Adicionar ícones da FontAwesome na Barra de Navegação

Mensagem por Convidado 24.03.19 14:31

Como verifiquei que o domínio do se fórum é inglês, se lhe for mais conveniente, peça suporte no fórum de suporte inglês: help.forumotion.com.


Questão resolvida

Esta questão foi dada como resolvida pelo seu autor, e por esse motivo será marcada como resolvida e movida para o arquivo de questões resolvidas desta área.
Anonymous
Convidado
Convidado


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