How to justify button icons and put them next to the text

When designing a website the user interface plays a crucial role in user experience. Buttons with icons are a common element that contribute to a user-friendly interface — but aligning the icon next to the text inside the button isn't always trivial, especially when you can't modify the HTML. This article guides you through doing it cleanly with CSS.

Introduction

When designing a website, the user interface plays a crucial role in enhancing user experience. One of the common elements that contribute to a user-friendly interface is the use of buttons with icons. Icons can provide a visual cue that complements the text, making it easier for users to understand the button's function. However, aligning these icons properly next to the text can sometimes be challenging, especially when you can't modify the HTML structure. This article aims to guide our users on how to align icons next to text in buttons effectively using CSS.

The challenge

In many cases, icons are positioned at the extreme left or right of a button, which can lead to a less intuitive user experience. The challenge is to align these icons next to the text within the button, without altering the HTML structure.

The CSS solution

CSS offers various properties to control the layout and positioning of elements. Here's a sample CSS code snippet that aligns the icon next to the text.

To use the following code go to your bio page editor, then select the Settings tab, scroll down and use the Custom CSS box to add the code:

.btn-custom i {
  position: relative !important;
  left: auto !important;
  margin-left: auto !important;
  margin-right: 10px !important;
}

The selector .btn-custom i targets the <i> element that holds the icon inside any button using the btn-custom class — which is the convention OpenMyLink buttons follow. Setting position: relative with left: auto pulls the icon out of any absolute-positioning the theme might apply. Then margin-left: auto + margin-right: 10px places the icon flush against the button's left edge with a small gap between it and the text.

Advantages of using CSS

1. Simplicity — CSS is straightforward to implement and doesn't require additional dependencies. A four-line snippet is all you need.
2. Performance — being a client-side solution, it doesn't put any load on the server. The browser already has the CSS engine; one extra rule is essentially free.
3. Maintainability — easier to manage as you only need to update the stylesheet. Change the gap, the alignment, or the icon size in one place and every button on the page updates.