Occasionally you might want to wrap text around an icon or give it some visual distinction with a border.
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.
| 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 |
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.