Tagged: 

Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • Author
    Posts
  • October 1, 2014 at 12:51 pm #328006
    bakbek

    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.

    October 1, 2014 at 12:55 pm #328012
    Yigit

    Hi bakbek!

    Please see – http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/

    Best regards,
    Yigit

    October 1, 2014 at 3:06 pm #328149
    bakbek

    No way to use an image that isn’t an icon?

    October 1, 2014 at 8:42 pm #328469
    Yigit

    Hi!

    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!
    Yigit

    February 27, 2015 at 4:31 pm #403487
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 4:33 pm #403488
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 5:16 pm #403519
    Yigit

    Hi!

    I cannot see an icon element on “Our team” page. Can you please point it out by posting a screenshot maybe?

    Cheers!
    Yigit

    February 27, 2015 at 5:22 pm #403525
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 5:23 pm #403527
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 5:35 pm #403537
    Yigit

    Hi!

    You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)

    Regards,
    Yigit

    February 27, 2015 at 6:03 pm #403563
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 6:23 pm #403574
    Yigit

    Hey!

    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,
    Yigit

    February 27, 2015 at 7:05 pm #403600
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 10:10 pm #403692
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 10:35 pm #403700
    studiojas
    This reply has been marked as private.
    February 27, 2015 at 10:36 pm #403703
    studiojas
    This reply has been marked as private.
    March 2, 2015 at 5:31 am #404280
    Ismael

    Hi!

    Sorry for the delay. Please check it now: http://www.studiojas.com/wordpress2/?page_id=734

    Cheers!
    Ismael

    March 2, 2015 at 10:55 am #404366
    studiojas
    This reply has been marked as private.
    March 3, 2015 at 7:36 am #404965
    Ismael

    Hi!

    You can adjust the background-position property.

    Best regards,
    Ismael

    April 25, 2018 at 7:18 pm #946791
    Eric

    Hello 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,
    Eric

    • This reply was modified 6 years, 6 months ago by Eric.
    April 26, 2018 at 4:42 am #947056
    Ismael

    Hi!

    The images don’t exist. Please check if the image url is correct. I think it’s invalid. ( see private field )

    Cheers!
    Ismael

    April 26, 2018 at 8:15 pm #947449
    Eric

    @Ismael, updated URLs. firefox’s screen capture only works on public sites. sorry.

    April 28, 2018 at 12:28 am #948235
    Eric

    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?

    April 30, 2018 at 6:29 am #948790
    Ismael

    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,
    Ismael

    April 30, 2018 at 8:37 pm #949188
    Eric

    Hi 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!
    Eric

    May 3, 2018 at 5:50 am #950467
    Victoria

    Hi 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,
    Victoria

    May 3, 2018 at 6:41 am #950499
    Eric

    Sure 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!

    May 4, 2018 at 6:44 am #951350
    Ismael

    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!
    Ismael

    November 28, 2018 at 11:37 pm #1038765
    bromso

    If 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;
    }

    December 1, 2018 at 9:55 am #1039571
    Rikard

    Hi bromso,

    Thanks for sharing, much appreciated :-)

    Best regards,
    Rikard

  • Author
    Posts
Viewing 30 posts - 1 through 30 (of 32 total)
1 2
  • The topic ‘How to use images instead of icons in an icon box?’ is closed to new replies.