-
Posts
-
Hi, I have a set of icon boxes – http://polytowncoil.staging.wpengine.com/#services (hosted on WPengine) – and I want to know if I can an image instead of an icon? or if I can add more icons to choose from and maybe add the images I need?
Thanks.
Hi bakbek!
Please see – http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/
Best regards,
YigitHi!
You can turn on custom CSS field for ALB elements ( please see – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ ) and give your icon a custom CSS class and then add following code to Quick CSS
.custom-class .av_font_icon a { background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png); height: 40px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } .custom-class .av_font_icon a:before { display: none; }Cheers!
YigitHi!
I cannot see an icon element on “Our team” page. Can you please point it out by posting a screenshot maybe?
Cheers!
YigitHi!
You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)
Regards,
YigitHey!
Do you mind creating a temporary admin login and posting it here privately? I now see that you have added custom CSS code to custom CSS field. Which should be used for giving a class to the element as “custom-class” and then CSS code should be added to Quick CSS field in Enfold theme options. I can fix it for you
Best regards,
YigitHi!
Sorry for the delay. Please check it now: http://www.studiojas.com/wordpress2/?page_id=734
Cheers!
IsmaelHello Enfold support,
We just updated one of our staging sites with Enfold 4.3 to test it out. We noticed a couple things that “changed” after the update. Regarding the icons we used the solution you have above i.e. using images as icons within the icon boxes. Specifically they disappeared! We did set the “Performance” to delete all old CSS but when looking in our custom CSS, the code was still there. Any idea why our ALB set up to place images in the iconboxes is now not working? Custom CSS and links to changes in private for you to review.
Thanks,
EricHi!
The images don’t exist. Please check if the image url is correct. I think it’s invalid. ( see private field )
Cheers!
Ismael@Ismael, updated URLs. firefox’s screen capture only works on public sites. sorry.
i’m seeing there are quite a few other bugs with 4.3. Currently we have two other major CSS problems since the upgrade–including this one. Were you able to see the new screenshots and issues regarding the missing iconbox icons?
Hi,
I’m not referring to the screenshot url. I was referring to the icons’ image urls. They are invalid. Please check the url in the private field. We would like to access the site but the reCAPTCHA authentication fails.
Best regards,
IsmaelHi Ismael,
We updated the recaptcha to be less strict. You should be able to access the wp admin area now. Regarding the image URLs, the front end of the site is hidden so any images URLs will break if you aren’t logged in. Btw, i noticed something interesting… on the staging site where the theme update occured the url for the images is different now than on the production site where we’re still running enfold 4.25. See private area for image location differences. Looks like you’re now referencing the images from the dynamic avia folder and then /wp-content/uploads/… folder.
Any ideas on how to fix? Thanks!
EricHi Eric,
You might want to upgrade your php version, php5.4 might not work properly very soon, it should be at least php5.6.3, but better php7.
Best regards,
VictoriaSure but this doesn’t have anything to do with the change in where the icon images are stored with the recent upgrade. If you look at the custom css that enfold Support provdided, is it easy enough to update the image URLs? We’re you able to access the wp admin areas to troubleshoot? Thanks!
Hi!
Other users reported the same issue and it seems to be related to the new css compression feature. Please deactivate that option temporarily. Use a plugin like Autoptimize temporarily.
Cheers!
IsmaelIf you want this to work, this is the code you need to use.
Then it works with css compression as well..custom-class .av_font_icon a {
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
height: 40px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}.custom-class .av_font_icon a:before {
display: none;
}
- The topic ‘How to use images instead of icons in an icon box?’ is closed to new replies.