Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 18, 2022 at 5:20 pm #1352215
    pelgrimrat

    Dear members of the support forum,

    I can’t seem to change the size and position of the icon in the icon box properly.

    For instance, on this page:
    https://hendrickhamelmuseum.nl/onderwijs/

    Somewhere in the top part of the page, there are 3 icons. I would like to make those larger AND keep them nicely centered inside the circle.

    Futher down the page, there are 2 icon boxes with a pencil as an icon. I would like to make those SMALLER and keep them nicely centered inside the circle. In this case, that means move them up a little bit.

    Your help will be much appreciated!

    May 19, 2022 at 8:53 am #1352259
    Ismael

    Hey pelgrimrat,

    Thank you for the inquiry.

    You should be able to use the following css code to adjust the style of the iconbox icons.

    #top .iconbox_top .iconbox_icon {
    float: none;
    position: absolute;
    left: 50%;
    top: -46px;
    margin: 0 0 0 -46px;
    padding: 30px;
    font-size: 50px;
    line-height: 50px;
}

#top .iconbox_top .iconbox_icon:before {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -40%);
}

    Please make sure toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    May 19, 2022 at 3:28 pm #1352322
    pelgrimrat

    Hi Ismael,

    Thank you very much for your help! The first 3 icons look great now!

    Do you also have a solution for me to adjust the 2 icons futher down the page? I can’t seem to change them without also changing every other icon on the page!

    Futher down the page, there are 2 icon boxes with a pencil as an icon. I would like to make those SMALLER and keep them nicely centered inside the circle. In this case, that means move them up a little bit.

    Again, your help will be much appreciated!

    May 20, 2022 at 5:32 am #1352368
    Ismael

    Hi,

    Thank you for the update.

    I can’t seem to change them without also changing every other icon on the page!

    You may have to apply a custom css class name or ID to the icon box element. Please edit the icon box, go to the Advanced > Developer Settings panel, look for the Custom CSS Class field and input the name “av-pencil-iconbox”, without the quotation marks. You can then use this class name to target that specific iconbox element and adjust its style. 

    #top .av-pencil-iconbox .iconbox_icon {
    float: none;
    position: absolute;
    left: 50%;
    top: -46px;
    margin: 0 0 0 -46px;
    padding: 30px;
    font-size: 50px;
    line-height: 50px;
}

#top .av-pencil-iconbox .iconbox_icon:before {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -40%);
}

    Adjust the values of the css properties as you wish.

    Best regards,
    Ismael

    May 24, 2022 at 3:52 pm #1352780
    pelgrimrat

    Hi Ismael,

    Thanks again for your help!
    I managed to adjust the css properties to make it look good, using your code. I ended up with this:

    #top .av-pencil-iconbox .iconbox_icon {
    float: left;
    padding: 30px;
    font-size: 42px !important;
    line-height: 10px !important;
}

#top .av-pencil-iconbox .iconbox_icon:before {
	    float: left;
    transform: translate(-50%, -40%);
}

    Thanks again and have a great day!
    The topic can be marked as resolved.

    Maarten

    May 24, 2022 at 7:39 pm #1352806
    Rikard

    Hi,

    Great, I’m glad that you got it working, and thanks for sharing your code. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Change size and position of icon in icon box’ is closed to new replies.