Font Awesome Shortcodes

Allow you to work with Font Awesome icons within your content.

Last updated:

What are Font Awesome Shortcodes?

Font Awesome shortcodes are simplified codes that allow you to easily add Font Awesome icons to your content within Refoundry blocks. These shortcodes can be used in various places like buttons, headings, paragraphs, and navigation menus, to enhance your design with visually appealing icons.

How it Works

In Refoundry, Font Awesome shortcodes allow you to seamlessly incorporate icons into your website’s content without needing to use complex HTML or CSS. These shortcodes are supported in multiple areas across Refoundry blocks, including button icon styles, button text, paragraph and heading blocks, navigation blocks, link blocks, list blocks, and custom icon settings.

When you want to add an icon, you can use a specific format that includes the name of the icon and a prefix that determines the icon’s style. For example, you can add icons with a solid, regular, light, or brand appearance depending on your design needs.

fas (Solid): This is the default style for most Font Awesome icons, offering a bold and solid appearance.

far (Regular): This prefix gives the icon a more lightweight and outlined look, suitable for a less pronounced effect.

fal (Light): This prefix is used for even lighter, more subtle icons, ideal for minimalist designs.

fa-brands: This prefix is specifically for brand logos, such as social media platforms or company logos.

To add an icon, you specify the icon’s name and its style (like solid or brand) in the shortcode within the block settings. The result is that the selected icon will appear in your content, enhancing the design without needing to manually code it. For example, if you want to add a heart icon, you would choose whether you want it to appear in a solid style, an outlined (regular) style, or another style, and then apply the corresponding settings. If you need to add a brand icon, like a Facebook logo, you would use the brand style setting.

These shortcodes are flexible and can be placed in various parts of your content, such as within text blocks, buttons, or navigation menus, allowing you to easily integrate visual elements that improve user engagement and overall site aesthetics.

To explore the full range of available icons and learn more about how to use them, you can visit the Font Awesome Icons page. This resource provides a comprehensive library of icons, along with detailed instructions on how to incorporate them into your designs using the appropriate shortcodes.

Related
Resources

Find more support docs in this specific category, or just level up your Refoundry knowledge with deeper reading.

All Support Resources

Try Now for Free

Not yet a Refoundry client? Download the plugin and get started building better sites today!

Get Refoundry

Contact Support

Can’t find what you’re looking for? Reach out any time, and one of our real humans will respond.

Contact Support