# Bordered & Pulled Icons

Learn about pulled and bordered icon styles in Font Awesome.

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

Before we start, make sure you're:

- [Set up with Font Awesome](/web.md#web-setup) in your project.
- Familiar with the basics of [adding Font Awesome icons](/web/add-icons/how-to.md).

  <h4>
    Bordered Icons will be deprecated in the future!
  </h4>

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.

<i class="fa-solid fa-quote-left fa-2x fa-pull-start"></i>
<p style="margin-top: 0;">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.</p>

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

<i class="fa-solid fa-arrow-right fa-2x fa-pull-end fa-border"></i>
<p style="margin-top: 0;">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.</p>

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

  <h4>
    Pulled Icons + CSS Logical Properties
  </h4>

The styling behind Pulled Icons is built using
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values">CSS Logical Properties</a>
to support using icons in as many
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_writing_modes">writing-modes</a>
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](https://developer.mozilla.org/en-US/docs/Web/CSS/float) value of `inline-start` and applying a `margin-inline-end` |
| `fa-pull-end`   | Pulls an icon by assigning a [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) value of `inline-end` and applying a `margin-inline-start` |

  <h4>
    Our Examples and Descriptions are Left to Right-Based
  </h4>

While our examples assume text is written left to right
<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a>
and are pulled visually to the left and right, how an icon is pulled will depend on your
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">language</a>
and
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">writing-mode</a>

## Customization

We've added [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) to make customizing easier and more efficient. Define your own values for the following properties to [override and customize](/web/style/custom.md#using-custom-properties-in-a-project) Font Awesome's defaults.

| CSS Custom Property   | Details                 | Accepted Values                                                                                       |
| :-------------------- | :---------------------- | :---------------------------------------------------------------------------------------------------- |
| `--fa-border-color`   | Set border color        | Any valid CSS `border-color` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)   |
| `--fa-border-padding` | Set padding around icon | Any valid CSS `padding` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/padding)             |
| `--fa-border-radius`  | Set border radius       | Any valid CSS `border-radius` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) |
| `--fa-border-style`   | Set border style        | Any valid CSS `border-style` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)   |
| `--fa-border-width`   | Set border width        | Any valid CSS ` border-width` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)  |
| `--fa-pull-margin`    | Set margin around icon  | Any valid CSS `margin` [value](https://developer.mozilla.org/en-US/docs/Web/CSS/margin)               |

<i class="fa-solid fa-quote-left fa-2x fa-pull-start" style="--fa-pull-margin: 4em;"></i>
<p style="margin-top: 0;">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.</p>

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

<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>
<p style="margin-top: 0;">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.</p>

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