Ícone no grupo e aos membros do grupo

por Aluuadoo 08.08.21 22:27

Detalhes da questão

Endereço do fórum: https://policiadme.forumeiros.com/forum
Versão do fórum: AwesomeBB

Descrição

Olá!

Estou tendo bastante dificuldade pra resolver meu problema de colocar um ícone do FontAwesome no prefixo de um grupo e no integrante do grupo.
Segui o passo a passo destes tópicos mas não resultou em nada:
1° https://ajuda.forumeiros.com/t113631-adicionar-icone-no-nome-do-grupo
2° https://ajuda.forumeiros.com/t106347-tutorial-adicionar-icones-antes-do-grupo

Independente do que eu faça, o ícone não aparece, ele é representado por um quadrado e ou ele fica só no grupo ou só no membro do grupo, prints abaixo:
1° https://prnt.sc/1lafr4d
2° https://prnt.sc/1lafwrm

Também vou deixar aqui o spoiler da minha folha de css e o código do overall_header

CSS:

Código:: .Requerimentos { box-shadow:inset 0px 1px 0px 0px #ffffff; background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%); background-color:#f9f9f9; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; cursor:pointer; color:#666666; font-family:Arial; font-size:15px; font-weight:bold; padding:8px 24px; text-decoration:none; text-shadow:0px 1px 0px #ffffff; } .Requerimentos:hover { background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%); background-color:#e9e9e9; } .myRequerimentos:active { position:relative; top:1px; } #borderDemo { border: 20px outset #3C6E54; border-radius: 15px; } #demo { background: #EDEDED url("/images/smiley.png") no-repeat scroll 0px 0px; } #demotext { color: #3C6E54; background: #EDEDED; text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC; color: #3C6E54; background: #EDEDED; } #demotext2 { color: #041A00; background: #EDEDED; text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC; color: #041A00; background: #EDEDED; } .folha1 { box-shadow: 0px 10px 14px -7px #3c6e54; background:linear-gradient(to bottom, #3c6e54 5%, #3c6e54 100%); background-color:#3c6e54; border-radius:8px; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:20px; font-weight:bold; padding:13px 32px; text-decoration:none; text-shadow:0px 1px 0px #000000; } .folha1:hover { background:linear-gradient(to bottom, #3c6e54 5%, #3c6e54 100%); background-color:#3c6e54; } .folha1:active { position:relative; top:1px; } a[href^="/g94-"], a[href^="/u"] span[style*="#B254F0"] { background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; background-size: 1800% 1800%; -webkit-text-fill-color: transparent; animation: rainbow 3s ease infinite; } @keyframes rainbow {0% {background-position: 0% 82%;} 50% {background-position: 100% 19%;} 100% {background-position: 0% 82%;} } a.gensmall[style="color: #B254F0"]:before { content: '\f005 \00A0'; font-family: 'fontawesome'; }

overall_header:

Código:: <!DOCTYPE HTML> <html lang="{L_LANG_HTML}"> <head> <meta charset="{S_CONTENT_ENCODING}" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />  <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />  {META_FAVICO} {META} <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css/" {META_FB_LIKE} <title>{SITENAME_TITLE}{PAGE_TITLE}</title> {T_HEAD_STYLESHEET} <meta name="theme-color" content="{GG_THEME_COLOR}" /> <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" /> <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" /> <script src="{JQUERY_PATH}" type="text/javascript"></script>  <script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script> <script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script> <script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>  <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>  <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" /> <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>   <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { Ticker.start({ height : {switch_ticker.HEIGHT}, spacing : {switch_ticker.SPACING}, speed : {switch_ticker.SPEED}, direction : '{switch_ticker.DIRECTION}', pause : {switch_ticker.STOP_TIME} }); }); //]]> </script>  <script type="text/javascript"> $(document).scroll(function() { var y = $(this).scrollTop(); if (y > 164) { if($('.btn-fixed').find('.btn-fixed-txt').length !== 0){ $('.btn-fixed').addClass('btn-scrolled'); } } else { if($('.btn-fixed').find('.btn-fixed-txt').length !== 0) { $('.btn-fixed').removeClass('btn-scrolled'); } } }); </script>  <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400'); if (pm != null) { pm.focus(); } }); //]]> </script>   <script type="text/javascript"> //<![CDATA[ var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false; $(document).ready(function () { $(window).resize(function () { var windowWidth = document.documentElement.clientWidth; var popupWidth = $("#login_popup").width(); var mypopup = $("#login_popup"); $("#login_popup").css({ "left": windowWidth / 2 - popupWidth / 2 }); }); }); //]]> </script>  {RICH_SNIPPET_GOOGLE} {HOSTING_JS}  <script async src="https://www.googletagmanager.com/gtag/js?id={G_ANALYTICS_ID}"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', '{G_ANALYTICS_ID}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  gtag('config', '{G_ANALYTICS_ID_BIS}', {'anonymize_ip': true, 'store_gac': false, 'cookie_expires': 13 * 30 * 24 * 60 * 60});  </script>  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <style> #logo-text { max-width: calc(100% - 150px); } .forum-description img { max-width: calc(100% - 15px); } </style> </head> <body id="top">  <div id="login_popup" class="block-subtle" style="z-index: 10001 !important;"> <div class="headline"> {SITENAME} <button title="{L_LOGIN_CLOSE}" id="login_popup_close"><i class="material-icons">close</i></button> </div> <div id="login_popup_content"> <div id="login_popup_message"> {LOGIN_POPUP_MSG} </div> <br /> <div id="login_popup_buttons">  <div class="mt10"> <div class="social_btn">  <div class="fb-login-button"></div>     <div class="ti-connect"></div>  </div> </div> <br/>  <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" value="{L_LOGIN}" class="btn btn-default" /> <input type="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" class="btn btn-default" /> </form> </div> </div> </div>  {GREETING_POPUP}  <div id="inactive_popup" class="block-subtle" style="z-index: 10000 !important;"> <div class="headline"> {inactive_users_modal.L_MODAL_TITLE} <button title="{inactive_users_modal.L_CLOSE}" id="inactive_popup_close"><i class="material-icons">close</i></button> </div> <div id="inactive_popup_message"> {inactive_users_modal.L_MODAL_BODY} </div> <br /> <div id="inactive_popup_buttons"> <button id="inactive_popup_url" class="button1">{inactive_users_modal.L_MODAL_BUTTON}</button> </div> </div> <script type="text/javascript"> $('#inactive_popup #inactive_popup_close').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; $('#inactive_popup').hide(50); }); $('#inactive_popup #inactive_popup_url').on('mouseup', function () { document.cookie = "modal_require_activation_closed=1; max-age=86400*15; path=/;"; location.href = '{inactive_users_modal.U_MODAL}' }) </script>   <div id="like_popup" class="block-subtle" style="z-index: 10001 !important;"> <div class="headline"> {SITENAME} <button title="{L_LIKE_CLOSE}" id="like_popup_close"><i class="material-icons">close</i></button> </div> <div id="like_popup_message"> {LIKE_POPUP_MSG} </div> <br /> <div id="like_popup_buttons"> <form action="{S_LOGIN_ACTION}" method="get"> <input type="submit" value="{L_LOGIN}" class="btn btn-default" /> <input type="button" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" class="btn btn-default" /> </form> </div> </div>  <header> <div id="main-menu-btn"> <i class="material-icons">menu</i> </div> <a id="logo-link" href="{U_INDEX}"> <div id="logo">  <img src="{switch_logo_mob.LOGO_MOB}" alt="{L_INDEX}" loading="lazy" />  </div> </a>  <a href="{S_LOGIN_ACTION}" class="button">{L_LOGIN}</a>   <a href="javascript:void(0)" id="header-user"></a> <a href="javascript:void(0)" id="header-notif"><i class="material-icons">notifications</i></a>  <form method="get" action="{ACTION_SEARCH}" id="search-main"> <input type="text" name="search_keywords" maxlength="128" placeholder="{L_SEARCH}" /> <button type="submit"><i class="material-icons">search</i></button> </form> <ul id="header-navigation"> <li><a id="navigation" href="/forum">Início <i class="material-icons">home</i>{L_FORUM}</a></li> <li><a id="navigation" href="/portal">Portal <i class="material-icons">web</i>{L_FORUM}</a></li> <li><a id="navigation" href='https://policiadmehb.wixsite.com/website-1'>Blog <i class="material-icons">question_answer</i></a></li> <li><a id="header-navigation" href='https://policiadme.forumeiros.com/h29-central-de-requerimentos'>CRH <i class="material-icons">contact_page</i></a></li> </ul> </header> <div id="main-menu" class="hidden"> <div class="main-menu-headline">{SITENAME}</div> </div> <div id="main-user-menu" class="hidden"> </div> <div id="notif-menu" class="hidden"> <div class="main-menu-headline" data-text="_lang['Notifications']"></div> <ul id="notif_list"> <li id="notif-view-all"><a href="/profile?mode=editprofile&page_profil=notifications" data-text="_lang['Notif_see_all']"></a></li> </ul> <div id="live_notif"> </div> </div> <div id="header-banner"> <div class="wrap">  <h2 style="transition: none !important; opacity: 0;">{switch_desc.SITE_DESCRIPTION}</h2>  </div> </div> <div id="wrap">  <div id="fa_ticker_block"> <div class="module"> <div class="inner"> <div id="fa_ticker_container"> <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;"> <div class="fa_ticker_content">  <div>{switch_ticker.ticker_row.ELEMENT}</div>  </div> </div> </div> </div> </div> </div>   </div> </body> </html>

O que eu queria é deixar o ícone aparecendo no grupo e também para os membros dele.

por Don Corleone 09.08.21 2:28

O erro está na parte do content do css, veja abaixo.

Código:: a.gensmall[style="color: #B254F0"]:before { content: '\f005 \00A0'; font-family: 'fontawesome'; }

O senhor colocou dois ícones '\f005 \00A0', mas é apenas um. Escolha um e coloue entre aspas.

por Aluuadoo 09.08.21 2:57

Connor R. escreveu:O erro está na parte do content do css, veja abaixo.

Código:
a.gensmall[style="color: #B254F0"]:before { content: '\f005 \00A0'; font-family: 'fontawesome'; }

O senhor colocou dois ícones '\f005 \00A0', mas é apenas um. Escolha um e coloue entre aspas.

No caso, ficaria assim o código?

Código:: a.gensmall[style="color: #B254F0"]:before { content: '\f005'; font-family: 'fontawesome';

porque se for, testei agora e o resultado foi o mesmo de antes, o ícone era pra ser uma estrela preenchida, e anda aparece somente no grupo, não fica para os membros dele também.

print: https://prnt.sc/1leveg3

por Lobs 09.08.21 16:55

Olá, Aluado.

Por favor, substitua o código do colega Connor R. pelo seguinte:

Código:: a.gensmall[style="color: #B254F0"]:before, span[style="color:#B254F0"][class="color-groups"]:before { content: '\f005'; font-family: 'fontawesome'; }

Atenciosamente,
Lobs zen

por -Xerox- 09.08.21 17:42

Olá, @Aluuadoo !

Caso nenhum dos códigos acima funcione, tente trocando o código:

Código:: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

por:

Código:: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

em seu overall_header.

por Aluuadoo 09.08.21 21:00

Olá, @Lobs!

Obrigado pela resposta, e infelizmente deu a mesma coisa, o grupo fica com o ícone aparece somente no grupo e como se não fosse reconhecido pelo site:

https://prnt.sc/1luuyu5

@-Xerox- é isso! Funcionou parcialmente, o ícone aparece como deveria aparecer no grupo, porém continua aparecendo só no grupo, o membro do grupo fica sem o ícone no prefixo do nick. Acha que é possível resolver?

No mais, obrigado aos dois pela ajuda!

https://prnt.sc/1lux63x

Edit1: Outra coisa que deu conflito: Eu quero colocar ícones em mais grupos, porém, quando adiciono, os usuários de um grupo ficam com o ícone de outro. Resumindo, quem faz parte do grupo "Supremacia" fica com o ícone do último código que adicionei na folha de CSS.

Print1: https://prnt.sc/1mdv8jy
Print2: https://prnt.sc/1mdvmkp

Código::

por -Xerox- 11.08.21 17:55

Olá, @Aluuadoo !

Retire todos os códigos citados acima que foram adicionados ao seu CSS e troque por:

Código:: a[style*="#B254F0"], span[style*="#B254F0"] { background: repeating-linear-gradient(to right, #FF0000, #FF7F00, #FFFF00, #00FF00, #0000ff, #4b0082, #8f00ff); -webkit-background-clip: text; background-size: 1800% 1800%; -webkit-text-fill-color: transparent; animation: rainbow 3s ease infinite; } div [style*="#B254F0"]::before { font-family: "Font Awesome 5 Free"; content:'\f005'; margin-right: 3px; font-weight: 1000; font-size: 12px; }

E aos demais grupos que não deseja adicionar cores "rainbow", adicione:

Código:: a[style*="COR DO GRUPO"], span[style*="COR DO GRUPO"] { font-weight: bold; } div [style*="COR DO GRUPO"]::before { font-family: "Font Awesome 5 Free"; content:'\f0e3'; color: COR DO GRUPO; margin-right: 3px; font-weight: 1000; font-size: 12px; }

e substitua as marcações destacadas como "COR DO GRUPO". Lembrando que deve trocar '\f0e3' pelo código do ícone da FontAwesome.

Qualquer dúvida, só criar um tópico.

por Aluuadoo 11.08.21 22:51

Olá @-Xerox-

Os conflitos que eu estava tendo foram todos resolvidos, obrigado! Porém, o grupo que deveria ficar com o efeito "rainbow" fica estático na cor vermelha, assim como seus membros.

Print1: https://prnt.sc/1n1p3sw

Código:

por -Xerox- 12.08.21 0:14

Olá, @Aluuadoo !

Vá em sua folha de estilo e desative a opção "Melhorar seu CSS". Creio que isso não irá prejudicar nas questões visuais de seu fórum, mas se prejudicar, peço que crie uma questão para que possam estar resolvendo.

por Aluuadoo 12.08.21 0:51

@-Xerox- a opção já esta marcada como não, assim como as outras duas acima dela. Farei o que disse, obrigado pela ajuda!

Podem fechar.

por Lobs 12.08.21 1:40

Tópico resolvido

Movido para "Questões resolvidas".

Ícone no grupo e aos membros do grupo