icon of su_button non centered

  • Resolved sdonnet

    (@sdonnet)


    4 years ago

    Hi,

    I am regularly using “icon” in [su_button] shortcodes, but, now, I have deleted text displayed on button, to keep only the icon.
    For instance :

    [su_button icon=”icon:exclamative-circle”][/su_button]

    This avoids me to manage texts in multilanguage pages.

    But, the icon is not centered, even with lack of text. The icon is lightly placed on the left.
    I am not a specialist of CSS, so I don’t know how to adjust classes to hide the space normally used by text.

    Is there a way to solve that ? Not a crucial problem, but a disturbing one, as all my pages use icon in su_button.

Viewing 1 replies (of 1 total)
  • hastibe

    (@hastibe)

    To override this (it’s a right margin causing it to be off-center), you’ll have to give the buttons a custom class by adding one to the button shortcode (let’s do class="just-icon" so your example button would be [su_button icon="icon:exclamative-circle" class="just-icon"][/su_button]). After doing that, add this CSS to the “Additional CSS” panel via Appearance > Customize in your site’s admin back-end:

    .su-button.just-icon i {margin-right: 0px !important;}

    This should do the trick (and if it doesn’t just post back)!

Viewing 1 replies (of 1 total)
  • The topic ‘icon of su_button non centered’ is closed to new replies.