How To: Replacing Love It Icon

[fumblepigskin]

I figured out a way to replace the heart icon with any other font awesome icon without updating all the php files. Just add the following to the Tracking Code text box in the Flexform general options.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('i.icon-heart').removeClass('icon-heart').addClass('icon-thumbs-up');
});
</script>

For whatever reason, you need to load the jquery library even though it should have already loaded, and I couldn’t quite figure out how to get it to serve the file from the wp-includes/js/jquery directory, hence why it is loaded from the google cdn.

The above code works, but if anyone can figure out those two minor issues, that would be cool.

Enjoy

[Ben – SUPPORT]

How were you trying to target the js folder? That could have been your issue were you using ?

Thanks
-Ben

[fumblepigskin]

I am not php savvy enough to do all that. I was just trying to get to the file this way:

<script src="http://mywebsite.com/wp-includes/js/jquery/jquery.js"></script>

[Cosmin – SUPPORT]

Also, have you tried using the Raw JS element, instead of pasting the code in the Tracking Code option? I don’t think you’d need to call jQUery again + calling it twice can cause unexpected errors.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[fumblepigskin]

It is strange, when I don’t call it, the jquery code doesn’t work, when I do call it, it does. I know, weird.

And I agree, it might cause unexpected errors. I have a pretty simple site, so i am not too worried about it. I haven’t seen any errors caused by it yet.

I am sure it would work in the raw js element, but then I would have to put the code on every page, no?

I’ll continue to fool with it and see if I can figure out why it is happening and post my results here.

[Cosmin – SUPPORT]

On second thought, try this custom CSS instead:

.icon-heart:before{content:"\f087" !important;}

Should swap the heart for the thumbs up symbol. You can refer to the FontAwesome reference for other symbol codes.

Regards,

————————————————————————————————————

Cosmin
Support Assistant

[fumblepigskin]

Just got around to testing this. Your solution is much better. Thanks very much!

[dfgutierrez]

Hi, I don’t understand where I have to paste this custom CSS code, it’s a corporate website and the heart doesn’t look well

[Swift Ideas – Ed]

Hi @dfgutierrez – you want to copy and paste it into the custom css box within the theme options panel.

Hope that helps.

– Ed