---
title: How to Add a Font Awesome Icon to the Back Button
description: Add a Font Awesome icon to the WordPress back button with the fa shortcode attribute. Free, and the plugin can load Font Awesome for you.
url: "https://wpfactory.com/docs/add-font-awesome-icon-to-back-button/"
updated: "2026-10-05"
category: How to
---

# How to Add a Font Awesome Icon to the Back Button

To show a Font Awesome icon on your back button, use the `fa` shortcode attribute in [Back Button Anywhere Widget for WordPress](https://wpfactory.com/item/back-button-widget-wordpress-plugin/). This is a free feature, and the plugin can even load the Font Awesome library for you if your theme does not already.

![Font Awesome section of the Back Button Widget settings](https://wpfactory.com/wp-content/uploads/Font-Awesome.png)

### Add an icon with the shortcode

Pass a Font Awesome class in the `fa` attribute:

```
[alg_back_button fa="fas fa-angle-double-left"]
```

To show the icon next to text, use `fa_template` with the `%icon%` placeholder:

```
[alg_back_button fa="fas fa-chevron-left" fa_template="%icon% Back"]
```

Setting `fa` renders the button as a simple text link containing the icon, so you can style it with the `class` and `style` attributes as usual.

### Load Font Awesome (only if needed)

If your theme or another plugin already loads Font Awesome, skip this step to avoid loading it twice. Otherwise, let the plugin load it:

1. Go to **WPFactory > Back Button** and open the **Font Awesome** section.
2. Set **Load** to **Yes**.
3. Leave the **URL** at its default, or paste the URL of the Font Awesome version you want.
4. Save changes.

### Options reference

| Label | Option ID | Default | Free/Pro |
| --- | --- | --- | --- |
| Load | `fontawesome_enabled` | No | Free |
| URL | `fontawesome_url` | A Font Awesome 6 CDN stylesheet | Free |

### Use an icon in a widget

The widget's Button label field runs shortcodes, so you can place a full button shortcode with an icon inside another button, or simpler still, use the shortcode directly wherever you need the button. For icon-first buttons, the shortcode is the most reliable route.

### Troubleshooting

- **Icon shows as a square:** Font Awesome is not loaded. Set Load to Yes, or confirm your theme loads it. See [Font Awesome icon not showing](https://wpfactory.com/docs/font-awesome-icon-not-showing/).
- **Wrong icon:** match the icon class to the loaded version. Class names and prefixes (`fas`, `far`, `fa-solid`) differ between Font Awesome versions.
- **Icon and translation together:** a single shortcode cannot combine the `fa` attribute with the `lang` / `not_lang_text` label swap. Use separate shortcodes if you need both.

### Get more control

Font Awesome icons are free. [Back Button Anywhere Widget for WordPress](https://wpfactory.com/item/back-button-widget-wordpress-plugin/) Pro adds menu placement, a floating button, and hide/show rules. [See what Pro unlocks](https://wpfactory.com/item/back-button-widget-wordpress-plugin/).

Related articles

- [How to Customize the Back Button (Color, Style, Position, Icon)](https://wpfactory.com/docs/how-to-customize-the-back-button-color-style-position-icon/)
- [How to Add a Floating Back Button](https://wpfactory.com/docs/add-floating-back-button/)
- [How to Add the Back Button to a WordPress Menu](https://wpfactory.com/docs/add-back-button-to-wordpress-menu/)
- [How to Translate the Back Button](https://wpfactory.com/docs/translate-the-back-button/)
- [Getting Started with Back Button Widget](https://wpfactory.com/docs/using-back-button-widget/)