Change Heart Icon for Favorite

This topic contains 3 replies, has 3 voices, and was last updated by  Guust 9 years ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: ,

  • Author
    Posts
  • November 2, 2015 at 11:24 pm #58825

    fdjenterprises
    Expired Member
    Post count: 2

    Hi I would like to change the icon that always appears next to “Favorite” to something else. How would I do this? Where would I find the code that performs this action?

    November 3, 2015 at 4:51 pm #58907

    Paolo
    Site Admin
    Post count: 31206

    Hi,

    you can do all that with CSS using the pseudo element ::before.

    1st you’ll need to hide the heart: 

    

    .fa.fa-heart {
    display: none;
}
    

    2nd you need to add whatever icon you wish (in this example I add the thumb-up):
    

    

    .geodir-addtofav-icon::before {
    content: "f164";
    font-family: FontAwesome;
}
    

    You want to add this css in GeoDirectory >> Design >> Scripts >> CSS.
    

    Each icon has it’s own unicode : http://fortawesome.github.io/Font-Awesome/cheatsheet/
    

    You’d use the last for digits with a backslash in front. 
    

    For the example above, the unicode for the thumbs up would be :&#xf164
    

    We used : f164.
    

    Let us know how you went.
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		November 4, 2015 at 11:14 pm

		
		#59061

		
		
		
	
    


    


    

	
    

		
		
    fdjenterprises
    Expired Member
    
		
		
     Post count: 2
    
	
    

	
    

		
		
    Hi-
    

    First Thank you for your hard work.  This clears some confusion for me on how wp and considerate theme/plugin devs implement and expose customization capability to users.
    

    It worked great as is….halfway.  What I experience is thumbsUp icon next to string: “Favorite” (great), But when I select/click it, the icon becomes invisible and I see string: “Unfavorite”.  
    

    The standard heart implementation shows a heart filled red when favorite, and just a dimmed outline of a heart when unfavorite.  What’s best way to handle the appearance of the icon, when action is toggled on/off?  Say I want to change the fill color, or just outline, or even use a different icon, like a thumbsdown “f165”?
    

    And is there a good list of all the gd classes (such as: .geodir-addtofav-icon)?
    

		
	
    


    

			
				

    

	
    

		November 5, 2015 at 12:25 pm

		
		#59083

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    You will have to use something like
    

    

    .geodir-removetofav-icon::before {
    content: "f164";
    font-family: FontAwesome;
}
    

    This will assist with finding the right code: https://wpgeodirectory.com/docs/customizing-your-style/
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 4 posts - 1 through 4 (of 4 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket
				

			

		

		
	
	


			

			


		
	


		

	

	


















	
	
			
			
			
			
                        
            
            
                
                

                    

                        20% Discount Offer
                        
                        
                    

                    

                        Hurry! Get your 20% discount before it expires.
                        Get 20% Discount