CODEWITHSUNDEEP
jqueryhtmlcssfont-awesome
StackOverflowed
StackOverflowed

Reputation: 5975

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

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');
}

Upvotes: 1

Views: 1537

Answers (4)

Iqbal Pasha
Iqbal Pasha

Reputation: 1316

try with this below code and you can continue to remove and add classes using jquery

$( "i#banner" ).click(function() {
  $(this).toggleClass( "fa-heart-o not-liked fa-heart liked" );
});
.liked { 
  color: #600;
}

.not-liked {
  color: #aaa;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<i class = 'fa fa-heart-o not-liked' id="banner"></i>
<i class = 'fa fa-heart-o not-liked' id="banner"></i>
<i class = 'fa fa-heart-o not-liked' id="banner"></i>

Upvotes: 2

Erik Philips
Erik Philips

Reputation: 54676

I highly recommend reading Decoupling Your HTML, CSS, and JavaScript - Philip Walton @ Google.

IMO, your code is to tightly coupled. Instead of tying everything together, take advantage of css as much as possible:

$(document).ready(function(){
  $(".js-update-heart").on("click", function(){
    $(this).toggleClass('is-liked is-not-liked');
    });
  });
.banner .fa{
  display: none;
  cursor: pointer;
}

.banner .fa-heart-o { 
  color: #600;
}

.banner .fa-heart {
  color: #aaa;
}

.banner.is-liked .fa-heart{
  display: inline;
  }

.banner.is-not-liked .fa-heart-o{
  display: inline;
  }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="banner is-liked js-update-heart">
  <i class="fa fa-heart-o"></i>
  <i class="fa fa-heart"></i>
</span>

In this example, the CSS reads nicely, and the jQuery is extremely small.

Upvotes: 1

Oka
Oka

Reputation: 26385

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>

Upvotes: 4

absingharora
absingharora

Reputation: 134

<i class = 'fa fa-heart-o not-liked' id = "#banner"></i>

In the code you mentioned above, make sure that,

id = "banner" instead of id = "#banner"

Then you can continue to remove and add classes using jquery; your solution would work just fine or I do prefer the solution provided by @Russel

Upvotes: 1

Related Questions