Replace Icon Fonts with Inline SVG (Elementor)

Three icons drawn with Font Awesome can download a whole icon font of 80 KB or more, often with several stylesheets. The option Replace icon fonts with inline SVG (Elementor) turns those icons into inline SVG and leaves the font files out of pages that no longer need them. It is off by default and needs Elementor, because the drawings come from Elementor’s own files.

Turn it on

1. Open Baza Helper > Cache & Optimization.
2. Check Replace icon fonts with inline SVG (Elementor). It sits in the list of options, above Repair accessibility markup automatically.
3. Clear the page cache, so that pages already in the cache are built again with the new option.

How it works

• Each finished page is read when it is rendered, and the result goes into the page cache.
• An empty Font Awesome 5 icon (solid, regular or brands) or an Elementor icon (eicon) becomes an inline SVG made from the drawings Elementor ships. Other attributes and classes stay as they are.
• An icon that the theme draws in CSS with a pseudo-element and a Font Awesome 5 or 6 code becomes an SVG mask with the same drawing.
• When nothing on a page needs an icon font any more, the icon font stylesheets, the font preloads and the Font Awesome 4 shim script are left out of that page.
• Each page is judged on its own. A scan of the whole site is not needed, and new content is covered automatically.

What still uses the font

A page keeps its icon fonts when it still has an icon the plugin cannot draw this way:

• Font Awesome 4 names, such as the class fa with the name FontAwesome.
• Size, spin and rotate classes, such as fa-2x, fa-spin and fa-fw.
• Icon names the plugin does not know.
• An icon font declared by your own @font-face rule in the theme.

Check the page after turning it on

Look at accordions, icon lists, menus and social network icons. An icon typed directly in a theme stylesheet that the plugin cannot read stays as it was, so check those on the site too.

Why it matters

A page with three Font Awesome icons usually loads a font of 80 KB or more and several CSS files. Drawing those icons as SVG removes that download on pages where nothing else needs the font.