Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #702073

    If I increase the icon-size of the class “span.avia_button_icon.avia_button_icon_left” to 40px for example, the icon doesnt vertically center in comparison to the text of the button.

    How can I increase the icon size and keep the icon centered in the button and centered in comparison to the text?

    #702227

    Hey envis,

    I’m not sure where I can see the problem on the page you linked to, could you upload a screenshot highlighting it please?

    Thanks,
    Rikard

    #702382

    I haven’t implemented it yet on my pages Rikard, since it doesn’t look good.

    I want to increase the icons size in comparison tot the text, but keep the text and icon verticallay in the middle of the button.
    This is what happens if I increase the icon size:
    The image and text don’t vertically align with the button

    • This reply was modified 7 years, 5 months ago by envis.
    #702743

    Hi,

    Ok, thanks for the info. Could you create a test page where we can see the problem maybe? We need to inspect the element in order to give you CSS to use.

    Best regards,
    Rikard

    #702815

    Rikard,

    URL attached in Private Content

    I have created the following CSS to make the icon bigger.

    span.avia_button_icon.avia_button_icon_left {
    	font-size: 36px;
    }

    But as you can see, the vertical allignment is completely wrong.

    #703607

    Hi,

    Please replace it with the following css code.

    #top .avia-button-fullwidth {
        font-size: 2em;
        line-height: 2em;
    }

    Turn on the custom css class if you want to apply this modifcation to a specific button or element.

    // http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    #703702

    Thank you Ismael,

    That is making the icon + text bigger.
    But I would like to make the icon bigger than the text and keep them both vertically centered.

    Do you know any solution for this?

    #704725

    Hi,

    Try to add this code also:

    #meer-dan-yoga-test .avia-button-fullwidth .avia_button_icon {
        display: inline-block;
        font-size: 40px;
        line-height: 48px;
        height: 48px;
    }
    
    #meer-dan-yoga-test .avia-button-fullwidth .avia_iconbox_title {
        display: inline-block;
        font-size: 18px;
        line-height: 48px;
        height: 48px;
    }

    Just adjust the font sizes as you see fit. :)

    Best regards,
    Nikko

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.