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:

Bordered Icons will be deprecated in the future!

The fa-border class that we used on previous versions of Font Awesome still works in v7. But we've decided to remove it in the next major version, Font Awesome 8. We think that this styling case is better handled with custom CSS.

Use fa-border and fa-pull-end or fa-pull-start for easy pull quotes or article icons.

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-quote-left fa-2x fa-pull-start"></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&hellip; 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-end style for more visual separation.

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-end 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&hellip; And one fine morning — So we beat on, boats against the current, borne back ceaselessly
into the past.

Pulled Icons + CSS Logical Properties

The styling behind Pulled Icons is built using CSS Logical Properties to support using icons in as many writing-modes and languages as possible.

Bordered and Pulled Classes

Class Details
fa-border Creates a border with border-radius and padding applied around an icons
fa-pull-start Pulls an icon by assigning a float value of inline-start and applying a margin-inline-end
fa-pull-end Pulls an icon by assigning a float value of inline-end and applying a margin-inline-start

Our Examples and Descriptions are Left to Right-Based

While our examples assume text is written left to right LTR and are pulled visually to the left and right, how an icon is pulled will depend on your language and writing-mode

Customization

We've added CSS custom properties 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
--fa-border-padding Set padding around icon Any valid CSS padding value
--fa-border-radius Set border radius Any valid CSS border-radius value
--fa-border-style Set border style Any valid CSS border-style value
--fa-border-width Set border width Any valid CSS border-width value
--fa-pull-margin Set margin around icon Any valid CSS margin value

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-quote-left fa-2x fa-pull-start" 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&hellip; And one fine morning — So we beat on, boats against the current, borne
back ceaselessly into the past.

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-end 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&hellip; And one fine morning — So we beat on,
boats against the current, borne back ceaselessly into the past.
    No results