Icons

Font Awesome

Bricks integrates with Font Awesome 6, specifically with its SVG with JavaScript (opens new window) version.

Icons can be used in the theme templates by the standard way, by using <i> tags:

<i class="fa-solid fa-magnifying-glass"></i>

that are replaced with the actual icon, as usual.

The complete JavaScript file contains all the icons and can be quite large in size: Gulp performs a tree shaking by using a plugin called gulp-fa-minify, that removes all unused icons from the final bundle.

To effectively use this feature, all used icons should be manually added to a safelist in the faIconSafelist setting, located inside bricks.config.js. More details about this are available on the plugin docs (opens new window).

The processed file will be located then at dist/js/fontawesome.min.js, and included in the theme from functions/enqueues.php:

wp_enqueue_script('fontawesome', get_template_directory_uri() .'/dist/js/fontawesome.min.js', false, $theme_version, true );

If you don't need to use Font Awesome icons, you can simply comment out this line.