Add a class of fa-fw on the HTML element referencing your icon to set one or more icons to the same fixed width. This is great to use when varying icon widths (e.g. a tall but skinny icon atop a wide but short icon) would throw off vertical alignment. For clarity in the following example, we’ve added a background color on the icon so you can see the fixed width and also bumped up the font-size of the parent element.
Font Awesome icons are designed on grid and share a consistent height. But they vary in width depending on how wide or narrow each symbol is. If you prefer to work with icons that have a consistent width, adding fa-fw will render each icon using the same width.
<!-- setting all icons used in buttons to have the same width using fa-fw --><div><spanstyle="border: 1px solid silver;border-radius: 0.25em;padding: 0.5em;"><iclass="fa-solid fa-arrow-left fa-fw"title="Back"></i></span><spanstyle="border: 1px solid silver;border-radius: 0.25em;padding: 0.5em;"><iclass="fa-solid fa-arrow-right fa-fw"title="Forward"></i></span><spanstyle="border: 1px solid silver;border-radius: 0.25em;padding: 0.5em;"><iclass="fa-solid fa-arrows-rotate fa-fw"title="Refresh"></i></span><spanstyle="border: 1px solid silver;border-radius: 0.25em;padding: 0.5em;"><iclass="fa-solid fa-house fa-fw"title="Home"></i></span><spanstyle="border: 1px solid silver;border-radius: 0.25em;padding: 0.5em;"><iclass="fa-solid fa-info fa-fw"title="Info"></i></span><spanstyle="border: 1px solid silver;border-radius: 0.25em;padding: 0.5em;"><iclass="fa-solid fa-download fa-fw"title="Download"></i></span></div>