4

Uso fonte awesome como menu. A cor inicial do icone é amarelo. Como faço para o ícone permanecer branco quando estiver na página atual? Já tentei fazer usando css, mas sem sucesso.

<div class="centralizar">
<?php $paginaCorrente = basename($_SERVER['SCRIPT_NAME']);?> <!--Recupera pagina corrente em relação raiz do site;basename recupera o nome da pagina--> <!--RODAPE-MENU--> 
<div id="rodape-menu">
<ul >
<li><a href="index.php" <?php if($paginaCorrente == 'index.php') {echo 'class="corrente"';} ?>><span class="fa fa-home"></span></a></li 
<li><a href="servicos.php" <?php if($paginaCorrente == 'index.php') {echo 'class="corrente"';} ?>><span class="fa fa-cogs"></span></a></li>
4
  • 1
    Como a aplicação sabe "qual é a página atual"?
    – Jéf Bueno
    Commented 19/06/2017 às 12:52
  • Utilizo código em javascript na página, que identifica a página atual Commented 19/06/2017 às 13:14
  • Uma sugestão, porque já não deixa esses valores estáticos? Ou seja, a página que você está ficar com a cor que deve ficar.
    – Marconi
    Commented 19/06/2017 às 13:59
  • @MariaDoCarmoViannaDeMenez atualizei a resposta.
    – mercador
    Commented 19/06/2017 às 16:39

3 Respostas 3

3

Como eles são apenas fontes, você pode estilizar eles como fontes:

.fa-cog.corrente {
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="centralizar">
   <?php
       $paginaCorrente = basename($_SERVER['SCRIPT_NAME']);
       $classe = $paginaCorrente == 'index.php' ? "corrente" : "";
   ?> 
   <div id="rodape-menu">
       <ul>
           <li><a href="index.php"><span class="fa fa-home <?php echo $classe; ?>"></span></a></li>
           <li><a href="servicos.php"><span class="fa fa-cogs <?php echo $classe; ?>"></span></a></li>
       </ul>
   </div>
</div>
2
  • olá! começando a ver php agora. Na linha 5 ($classe=$paginaCorrente...), como fica para as demais páginas do site? Testei com 'index.php' e deu certo, e as outras, como defino? Obrigada Commented 20/06/2017 às 19:58
  • @MariaDoCarmoViannaDeMenez pode explicar melhor? Para as demais páginas do site, qual estilo você quer aplicar? Desse jeito, index.php aplica o estilo corrente, por exemplo.
    – mercador
    Commented 21/06/2017 às 1:37
0

Você pode mudar a a classe css com uma condicional. Tenta obter o link da pagina com uma função em javascript. E adiciona a função com o evento on load no corpo do site.

<script> 
   function Active(){ 
      var pagatual = window.location.href;
      var pagina = link da pagina;
      If(pagina==paginatual){("id do elemento html").style.color = "código da       cor quando a pagina estiver ativa";}      
} 
</script>
5
  • você poderia detalhar mais a sugestão? como seria essa condicional no css? Commented 19/06/2017 às 14:56
  • Postei acima uma sugestão. Vê se funciona e me fala Commented 19/06/2017 às 14:59
  • Na verdade com essa função você inseriria a classe css o atributo color ... Commented 19/06/2017 às 15:06
  • Você sabe como adicionar eventos javascript no site? Commented 19/06/2017 às 15:07
  • ok. Entendi, mas não consegui implementar de modo que funcione. Abaixo parte do código bastando funcionar ícones awesome na cor branca para pagina corrente. Commented 19/06/2017 às 19:03
0

Esse funcionou perfeitamente:

 <!DOCTYPE html>
<html>
<body onload="Active()">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="centralizar">
   <div id="rodape-menu">
       <ul>
           <li><a href="index.php"><span id="home" class="fa fa-home ?>"></span></a></li>
           <li><a href="servicos.php"><span class="fa fa-cogs "></span></a></li>
       </ul>
   </div>
</div>

<script>
function Active() {
  var paginaativa = window.location.href ;
  var paginaicone = 'file:///C:/Users/T.I/Desktop/index.php';

  if (paginaativa==paginaicone) {

    document.getElementById("home").style.color = "red";
  }
}
</script>

</body>
</html>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .