CODEWITHSUNDEEP
htmlcsssass
raduken
raduken

Reputation: 2119

How to change font-awesome icon color when it is active

How to change font-awesome icon color when it is active, I have a menu with font-awesome links and I would like change the icons colors when is active, some can help on this?

I did read about states: https://smacss.com/book/state but still not working in my code, its a way to make this work? thank you.

ul {
  list-style-type: none;
  li {
    padding: 10px;
    border-top: 1px solid blue;
    &:first-child {
      border: none;
    }
    i {
      color: black;
      &:hover {
        color: white;
        background-color: blue;
      }
    }
    &:hover {
      background-color: blue;
      color: white;
    }
    &:active {
      background-color: yellow;
      color: black;
    }
    &:focus {
      background-color: red;
      color: white;
    }
  }
}

ul {
  list-style-type: none;
}

ul li {
  padding: 10px;
  border-top: 1px solid blue;
}

ul li:first-child {
  border: none;
}

ul li i {
  color: black;
}

ul li i:hover {
  color: white;
  background-color: blue;
}

ul li:hover {
  background-color: blue;
  color: white;
}

ul li:active {
  background-color: yellow;
  color: black;
}

ul li:focus {
  background-color: red;
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<ul>
  <li>
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
      <i class="fa fa-bars fa-2x" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="search"><i class="fa fa-search fa-2x" aria-hidden="true"></i></a>
  </li>
</ul>

Upvotes: 2

Views: 14241

Answers (3)

D.Churches
D.Churches

Reputation: 11

You can add a custom class in your html like this: 

<ul>
  <li>
    <a class="menu" data-toggle="tooltip" data-placement="bottom" title="home">
      <i class="fa fa-bars fa-2x color" aria-hidden="true"></i>
    </a>
  </li>
  <li>
    <a class="search"><i class="fa fa-search fa-2x color" aria-hidden="true"></i></a>
  </li>
</ul>

And then, in your css add a property in the active event:

.color:active {
    color:red;
}

Upvotes: 1

Mark
Mark

Reputation: 2071

Your SCSS

li {
  // active pseudo on li 
  &:active {
    i { color: #your-active-color; }
  }

  a {
    // active pseudo on a link 
    &.active {
      i { color: #your-active-color; }
    }
  }

}

jQuery -

$(document).ready(function() {
  $('li a').on('click', function() {
    $('li a').removeClass('active');
    $(this).addClass('active');
  });
});

Upvotes: 2

mohsen kholaseshoar
mohsen kholaseshoar

Reputation: 347

You can use the following code

.fa:active{
 color: #your-active-color;
}

Upvotes: 3

Related Questions