Occasionally you might want to wrap text around an icon or give it some visual distinction with a border.

Advertisement

Before You Get Started

Before we start, make sure you're:

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

  <i class="fa-solid fa-quote-left fa-2x fa-pull-left"></i>
  Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Use fa-border in combination with fa-pull-right style for more visual separation.

  <i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border"></i>
  Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Bordered and Pulled Classes

Class Details
fa-border Creates a border with border-radius and padding applied around an icons
fa-pull-left Pulls an icon by floating (opens new window) it left and applying a margin-right
fa-pull-right Pulls an icon by floating (opens new window) it right and applying a margin-left
Advertisement

Customization

We've added CSS custom properties (opens new window) to make customizing easier and more efficient. Define your own values for the following properties to override and customize Font Awesome's defaults.

CSS Custom Property Details Accepted Values
--fa-border-color Set border color Any valid CSS border-color value (opens new window)
--fa-border-padding Set padding around icon Any valid CSS padding value (opens new window)
--fa-border-radius Set border radius Any valid CSS border-radius value (opens new window)
--fa-border-style Set border style Any valid CSS border-style value (opens new window)
--fa-border-width Set border width Any valid CSS border-width value (opens new window)
--fa-pull-margin Set margin around icon Any valid CSS margin value (opens new window)
  <i class="fa-solid fa-quote-left fa-2x fa-pull-left" style="--fa-pull-margin: 4em;"></i>
  Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
  <i class="fa-solid fa-arrow-right fa-2x fa-pull-right fa-border" style="--fa-border-color: inherit; --fa-border-padding: 0.5em; --fa-border-radius: 100%; --fa-border-style: dotted; --fa-border-width: 0.5em;"></i>
  Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!