Image instead of fa-icon

Hi,

I am using Rocked Pro version. How can I use my own image instead of fa-icon? And highlight mouse over same functionality as fa-icon. Is there a way to link that image?

Thanks,

Dear Yeti,

Thank you for asking.

Try to use the following CSS code.

.fa-star-o:before{
  content: ''; /* Remove default icon */
  display: inline-block;
  width: 64px;
  height: 64px;
  background: url('url/path/to/your/image1.png') center center no-repeat;
}

.fa-star-o:hover:before{
  background: url('url/path/to/your/image2.png') center center no-repeat;
}

The code above replaces the star icon as seen on our demo page.

You could apply the CSS code above through the Simple Custom CSS plugin or child theme’s style.css.

I hope this reply helps.

Regards,
Kharis

Hi Kharis,

Much appreciated the quick response however it is some reason not working. I am using rocked pro service type A. Could you please help.

Thanks

Hello there,

Thank you for updating me.

Could you confirm if you have adjusted the Font Awesome icon class selector .fa-star-o to which currently being used on your service item, see this screenshot?

Could you confirm if you have specified the correct image path URL?

If possible, could you please post your site URL here so I can have a closer look?

Regards,
Kharis

Yes, I did. Actually I am using fa-globe…

Here is what I used in my test site : http://www.webdev.tongba.ca/

/* Remove default icon */
.fa-globe:before{
content: ‘’;
width: 64px;
height: 64px;
background: url(‘http://www.webdev.tongba.ca/wp-content/uploads/2016/02/design1.png’) center center no-repeat;
}

.fa-globe:hover:before{
background: url(‘http://www.webdev.tongba.ca/wp-content/uploads/2016/02/design2.png’) center center no-repeat;
}

Hello there,

Thank you for the site link. It helped me a lot.

Could you please just copy-paste the following CSS code?

.widget_rocked_services_type_a .roll-iconbox.border .icon{
  border: none;
}

.widget_rocked_services_type_a .roll-iconbox:hover .icon{
  background: transparent !important;
}

.widget_rocked_services_type_a .fa-globe:before{
  content: '';
  display: block;
  width: 64px;
  height: 64px;
  background: url('http://www.webdev.tongba.ca/wp-content/uploads/2016/02/design1.png') center center no-repeat;
}

.widget_rocked_services_type_a .fa-globe:hover:before{
  background: url("http://www.webdev.tongba.ca/wp-content/uploads/2016/02/design2.png") center center no-repeat;
}

Let me know how it goes.

Regards,
Kharis

Still no luck Kharis. I cleared the cache as well but doesn’t work.

Thanks,

Dear Yeti,

If you don’t mind, would you please give me a temporary access to your site admin area and let me try applying that code? You can send the login credentials to my email kharisblank at gmail dotcom with the link to this topic.

Regards,
Kharis

Hello there,

Thank you for allowing me to access your site admin area. I found some errors in your CSS code. I fixed it.

After applying custom CSS code, you should need to delete cache. Go to Settings > WP Super Cache > Delete Cache
To check whether your CSS code contains an error or no, you can use this CSS validation service https://jigsaw.w3.org/css-validator/#validate_by_input

Since this thread has been resolved, please remove my account immediately.

Regards,
Kharis

Hi Kharis,

Thank you very much for your prompt assistance. Much appreciated!!! Now the my own image is showing up!

I wanted to change the image size to 100px or 200px but encountered with the following issues. Could you help.

  1. Image is not centered
  2. Image background color is not picking up my background as the link button (i.e. green).

Thank you.

Dear Yeti,

> 1

Could you please try to apply the following CSS code?

.widget_rocked_services_type_a .roll-iconbox.border .icon{
  width: 100px;
  height: 100px;
}

> 2

Apologies, I can’t catch it clearly. What did you mean by “Image background color”?

Regards,
Kharis