Table of Contents
Problem Description #
When using the plugin’s icon (via shortcode fa or in widget), the icon doesn’t render properly, often showing as a blank square or fallback character.
Common symptoms:
- Instead of the expected icon (e.g., left-arrow), a small blank square or unknown-character symbol appears.
- Styling applied to button hardly affects the icon (only text styling works).
Typical causes:
- The Font Awesome library isn’t loaded.
- Conflict between multiple Font Awesome versions (loaded by theme or another plugin and the plugin).
- Wrong icon class name or invalid attribute in shortcode.
Solution-step-by-step:
- Verify Font Awesome loading setting
- In plugin settings, enable “Load Font Awesome” (if available). This ensures the library is enqueued so icon CSS and fonts load. WordPress.org+2WPFactory+2
- If your theme or another plugin already loads Font Awesome, disable the plugin option to avoid duplicate loading which may cause conflicts.
- Use correct icon class and shortcode syntax
Use a valid Font Awesome class. Example:
[alg_back_button fa=”fas fa-chevron-left” fa_template=”%icon% Back”]
Ensure you don’t have typos (“fa-” prefix, correct icon name).
3. Clear caches and test
-
- Clear browser cache, any cache plugins, and refresh the page. Check if the icon renders.
4. Inspect in browser dev tools
-
- Open dev tools → Network tab → reload → check whether the Font Awesome CSS and font file are being loaded. If not, resource loading blocked or path issue.
- Check console for font-loading or CSS errors.
- Fallback: Use text or image instead of icon
- If Font Awesome remains problematic, you can use plain text (label) or a custom CSS background/image as back-button instead.
- If Font Awesome remains problematic, you can use plain text (label) or a custom CSS background/image as back-button instead.
Prerequisites
- Valid Font Awesome version / license if needed.
- Latest plugin and WP version.
Additional Notes / Prevention
- If using a theme that loads its own icon set (e.g., its own minimal subset of Font Awesome), ensure its icon version is compatible.
Keep the shortcode syntax consistent, sometimes copy-pasting can introduce invisible characters that break icon class.
