Using font-awesome and css, is it possible for a css change to alter the icon?

debugcn Published at Dev

StackOverflowed

Assume I have the following css:

<style>
  .liked { 
      color: #600;
   }

   .not-liked {
       color: #aaa;
   }
</style>

Assuming I have this: <i class = 'fa fa-heart-o not-liked' id = "banner"></i>

in my jQuery, if I swap classes from not-liked to liked can I also swap fa-heart-o to fa-heart in the same class?

So I'm trying to avoid this:

function() {
   $("#banner").removeClass('not-liked');
   $("#banner").removeClass('fa-heart-o');
   $("#banner").addClass('liked');
   $("#banner").addClass('fa-heart');
}

and basically switch the colour and the icon with this:

function() {
   $("#banner").removeClass('not-liked');
   $("#banner").addClass('liked');
}

Oka

FontAwesome glyphicons can be accessed via their Unicode identifiers. In fact, all the predefined classes provided by the stylesheet are created in the same way, using the ::before pseudo-element selector, and content.

We can see fa-heart is f004, and fa-heart-o is f08a.

If you want to reduce the class list overhead, for both your HTML and JavaScript, just adjust your own classes to represent exactly what you need.

$('.toggle').on('click', function () {
  $(this).toggleClass('not-liked liked');
});

$('.once').on('click', function () {
  $(this).removeClass('not-liked').addClass('liked');
});

.liked::before {
  color: #600;
  content: '\f004';
}

.not-liked::before {
  color: #aaa;
  content: '\f08a';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<span class='toggle fa not-liked'></span>
<span class='once fa not-liked'></span>

Collected from the Internet

Please contact [email protected] to delete if infringement.