Display a button image instead of text or icon

This topic contains 11 replies, has 3 voices, and was last updated by  Kor 6 years, 6 months ago.

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

Open Support Ticket
  • Author
    Posts
  • November 3, 2017 at 2:25 am #403917

    kevinbill
    Buyer
    Post count: 76

    I am hoping you can answer how i can use an image instead of an icon in the custom field for url. I would like to display a button image instead of the default text or icon is this possible. I do appreciate your response. Thank you

    November 3, 2017 at 6:51 am #403938

    Kor
    Moderator
    Post count: 16516

    Hi Kevinbill,

    Not sure what you mean there. Could you please share the URL of the site in question so we can take a better look at it and also WP temp admin access to your site. We can probably achieve this using custom CSS.

    You can post the details here using the private reply option below.

    Thanks!

    November 4, 2017 at 8:15 pm #404177

    kevinbill
    Buyer
    Post count: 76

    Thank you for your response.
    When you create a custom field for url it gives you the option of adding default text and a icon. Instead of text or icon i need to display an image. I have been trying css and have had some success in getting the text changed but i cannot get the image to display any larger than the icon would. I hope this makes sense.

    November 4, 2017 at 8:41 pm #404179

    Alex Rollin
    Moderator
    Post count: 27815

    Hello!

    Ah, that sounds like the right approach, to use CSS to style the field as a button. Here are some other links that might help.

    https://wpgeodirectory.com/docs/custom-field-examples/
    https://wpgeodirectory.com/docs/core-place-settings

    Let us know how it goes

    November 5, 2017 at 4:09 am #404195

    kevinbill
    Buyer
    Post count: 76

    Thank you for the links do you have any starting point for this.
    Thank You

    November 5, 2017 at 11:46 am #404206

    Kor
    Moderator
    Post count: 16516

    Hi Kevinbill,

    Have you set up a custom field URL link on your Website? I can try to work out the custom CSS code for you if you can share the link.

    Thanks!

    November 7, 2017 at 1:46 am #404407

    kevinbill
    Buyer
    Post count: 76
    This reply has been marked as private.
    November 7, 2017 at 5:30 am #404420

    Kor
    Moderator
    Post count: 16516

    Hi Kevin,

    Use the custom CSS below and change the image URL to your liking. Insert into GD > Design > Scripts > Custom Style CSS

    

    .geodir_more_info.geodir_proxi .fa-chain:before, .fa-link:before {
    content: none!important;    
}

.geodir_more_info.geodir_proxi span.geodir-i-website:before {
    content: url("https://s.w.org/about/images/logos/wordpress-logo-32-blue.png");
}
    

		
	
    


    

			
				

    

	
    

		November 8, 2017 at 1:02 am

		
		#404537

		
		
		
	
    


    


    

	
    

		
		
    kevinbill
    Buyer
    
		
		
     Post count: 76
    
	
    

	
    

		
		
    ok this is getting closer. I need the image clickable to go to the link and no text. Thank you so much for your help…
    

		
	
    


    

			
				

    

	
    

		November 8, 2017 at 4:58 am

		
		#404555

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi kevin, 
    

    Try this. It should remove the texts and replace it with a clickable image.
    

    

    .geodir_more_info.geodir_proxi strong {
    content: url("https://s.w.org/about/images/logos/wordpress-logo-32-blue.png")!important;
}
    

		
	
    


    

			
				

    

	
    

		November 9, 2017 at 2:12 am

		
		#404673

		
		
		
	
    


    


    

	
    

		
		
    kevinbill
    Buyer
    
		
		
     Post count: 76
    
	
    

	
    

		
		
    This is what i added and it worked out amazingly thank you very much!!!
    
in case anyone is needing this.
    

    

    .geodir_more_info.geodir_proxi .fa-chain:before, .fa-link:before {
    content: none!important;    
}
.geodir_more_info.geodir_proxi strong {
    content: url("https://s.w.org/about/images/logos/wordpress-logo-32-blue.png")!important;
}

    

		
	
    


    

			
				

    

	
    

		November 9, 2017 at 4:56 am

		
		#404680

		
		
		
	
    


    


    

	
    

		
		
    Kor
    Moderator
    
		
		
     Post count: 16516
    
	
    

	
    

		
		
    Hi Kevin, 
    

    Thanks for sharing 🙂
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


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


	


		
	





		
				

			

				

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

					Open Support Ticket