Inline Font Icons Experiment

In order to continue to improve the performance of Elementor built websites, you may now choose to load Font Awesome icons and e-icons inline with SVG by activating the option in Elementor Experiments. SVGs are vector-based images that are rendered using the browser’s engine. The benefit of using inline SVG icons, is that they do not increase server requests, which could have had an adverse effect on your site’s performance.

Activate / Inactivate This Experiment

You may navigate to Dashboard > Elementor Settings > Experiments to toggle the settings of this experiment.

Advantages / Differences

  1. How Icons Render – SVG renders in your page’s HTML rather than as CSS pseudo-elements in Icon Fonts
  2. Auto Accessibility – SVG supports this feature by default rather than only in a kit
  3. Advanced Features – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do not
  4. Scalability – Icon fonts may use anti-aliasing techniques implemented by the browser making it less sharp. SVGs are treated as images by browsers, so no anti-aliasing rules are applied.

Note: This feature does not convert Font Awesome Pro icons. If you are a Pro FA user, navigate to your Kit settings at the Font Awesome site at Kit > Settings > Technology and set them to SVG.

Share it on social networks

Was this article helpful?

Related content

Get Started With Elementor Today

Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before

On this page

Birthday Sale: Up to 50%30% Off
Birthday Sale: Last 24 hours!
Birthday Sale: Last 24 hours:
Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount