We are developing a website where we would like to use the icon paragraph or icon box from the theme, but we also want to use our own icons instead of the icons in the theme itself.
If I use the icon box component from the theme, is it possible to put my own icons/.png images in there? I could not find this option unfortunately.
a. If you use chrome, when you are checking the page on frontend, make a right click on the icon and click inspect element, you should be able to see the icon class.
b. You can upload your image from the media library of wordpress, you just need to have an url to use for your custom css, if you want to use a different font, then you need to upload the font in your child theme, then add the custom font icons using css https://css-tricks.com/snippets/css/using-font-face/ then change the icon css to use your font family and content.
Do not hesitate to contact us if you have more questions.
Hi,
We are developing a website where we would like to use the icon paragraph or icon box from the theme, but we also want to use our own icons instead of the icons in the theme itself.
If I use the icon box component from the theme, is it possible to put my own icons/.png images in there? I could not find this option unfortunately.
Thank you for helping out!
Regards,
Richard
Hello Richard,
Unfortunately this is not possible to do this, but there is a "trick" to achieve this.
What you need to do is to select an icon you will never use.
Then add custom css to the icon class to make it use your png as background.
Tell us if you need more information.
Regards
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme
Hi,
I understand what you mean. Thanks. I will:
1. Take the icon css classes file.
2. Refer to my own icon and save the css classes file.
3. upload my own icon.
4. Use it in the visual composer.
I have two questions about this:
a. Where to find the icon css classes file?
b. Where should I upload my own icon?
Thank you for your help!
Regards,
Richard
Hello Richard,
a. If you use chrome, when you are checking the page on frontend, make a right click on the icon and click inspect element, you should be able to see the icon class.
b. You can upload your image from the media library of wordpress, you just need to have an url to use for your custom css, if you want to use a different font, then you need to upload the font in your child theme, then add the custom font icons using css https://css-tricks.com/snippets/css/using-font-face/ then change the icon css to use your font family and content.
Do not hesitate to contact us if you have more questions.
Regards.
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme
Hi,
Thanks for the feedback. I understand but I am not a CSS expert.
Which property should I use to set the URL to my own image?
Would it look like this:
.fa-cog {
src: url(path to my own image);
}
Regards,
Richard
Hello Richard,
Yes, if you can give us the link of the image and the page with module that use the icon you want to replace we could help you with the css
Regards
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme
Hello again,
What you need to do is to add this custom css :
This should replace the icon by the image, do the same for the other icon.
Do not hesitate to contact us if you have more questions.
Regards.
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme
Oh yes,
That looks really nice now! I am going to do the same for the other icons.
Thanks a lot for your help. I already gave 5 stars on Themeforest for your excellent support!
Thanks again!
Regards,
Richard
Hi,
One more question. In the screenshot you can see the icon on the left is not centered. How can I fix this?
Thank you for your help.
Regards,
Richard
Hello Richard,
Thanks for rating our theme 5 stars!
You can add this custom css :
.icon_sub_ctn .zo-xing:before { height: 46px; background-position: center; }
This should do the trick.
Do not hesitate to contact us if you have more questions.
Regards.
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme
Hi,
From the bottom of my heart: Thank you very much for your help! It just looks great now!
Regards,
Richard
Hello Richard,
You're welcome!
Glad to have been able to help you!
Do not hesitate to contact us if you have more questions.
Have a nice day!
Regards.
---------------------
Hosting we recommend ( Free SSL and CDN included in all plan ).
Speed up your site with Autoptimize
Test your site with GTmetrix and fix the issue to make it faster
How to Update your Theme