How do I make icone font awesome change the color to indicate the current page?

Asked

Viewed 6,393 times

4

I use awesome font as a menu. The initial color of the icon is yellow. How do I make the icon stay white when it’s on the current page? I’ve tried using css but unsuccessfully.

<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>
php font-awesome
  • 1

    How does the application know "what is the current page"?

  • I use javascript code on the page, which identifies the current page

  • A suggestion, why don’t you leave these values static? That is, the page you are staying with the color that should be.

  • @Mariadocarmoviannademenez updated the answer.

3 answers

3

Since they are just fonts, you can style them as fonts: 

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

  • hello! starting to see php now. On line 5 ($class=$pageCurrent...), how does it look for the other pages of the site? I tested with 'index.php' and it worked, and the others, how do I define? Thank you

  • @Mariadocarmoviannademenez can explain better? For the other pages of the site, which style do you want to apply? This way, index.php applies the style corrente, for example.

0

That worked perfectly:

 <!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>

0

You can change the css class with a conditional. Try to get the page link with a javascript function. And add the function with the on load event in the body of the 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>

  • Could you elaborate further on the suggestion? What would that conditional look like in css?

  • I posted above a suggestion. See if it works and tell me

  • Actually with this function you would insert the css class the color attribute ...

  • You know how to add javascript events to the site?

  • ok. I understood, but I couldn’t implement it in a way that works. Below part of the code just run awesome icons in white color for current page.

Browser other questions tagged php font-awesome

You are not signed in. Login or sign up in order to post.