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.
