Skip to content

Bordered & Pulled Icons

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.

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-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.

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"></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

ClassDetails
fa-borderCreates a border with border-radius and padding applied around an icons
fa-pull-leftPulls an icon by floating it left and applying a margin-right
fa-pull-rightPulls an icon by floating it right and applying a margin-left

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 PropertyDetailsAccepted Values
--fa-border-colorSet border colorAny valid CSS border-color value
--fa-border-paddingSet padding around iconAny valid CSS padding value
--fa-border-radiusSet border radiusAny valid CSS border-radius value
--fa-border-styleSet border styleAny valid CSS border-style value
--fa-border-widthSet border widthAny valid CSS border-width value
--fa-pull-marginSet margin around iconAny 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-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.

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.