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

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


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

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

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

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 ';}

agora mostrando este


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

Aceda a Painel de Controle Geral Fórum Configuração 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">

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

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

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

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

Preciso duma conta teste sem poderes administrativos.

Fico no aguardo.

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

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 ';}

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

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");
                        });

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

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  ';}

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

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

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

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.