Bordered & Pulled Icons

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

Before You Get Started

Before we start, make sure you're:

Set up with Font Awesome in your project.
Familiar with the basics of adding Font Awesome icons.

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`

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.