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

Question

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

Navigation

#1 by (3 votes)
#2 by (0 votes)
#3 by (0 votes)

4

Use awesome font as menu. The initial icon color is yellow. How do I make the icon remain white when it is on the current page? I have tried using css, but without success.

<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

asked by anonymous 19.06.2017 / 14:36

3 answers

Write .txt file node.js Difference between the fetch and setFetchMode methods of the PDO

score 3 · Answer 1

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

score 0 · Answer 2

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>

score 0 · Answer 3

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