Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 20, 2016 at 8:28 pm #702073
    envis

    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?

    October 21, 2016 at 9:09 am #702227
    Rikard

    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

    October 21, 2016 at 1:58 pm #702382
    envis

    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 8 years, 1 month ago by envis.
    October 22, 2016 at 8:16 am #702743
    Rikard

    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

    October 22, 2016 at 1:38 pm #702815
    envis

    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.

    October 25, 2016 at 7:17 am #703607
    Ismael

    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

    October 25, 2016 at 10:38 am #703702
    envis

    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?

    October 27, 2016 at 8:53 am #704725
    Nikko

    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

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