In order to continue to improve the performance of Elementor built websites, you may now choose to load Font Awesome 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
- How Icons Render – SVG renders in your page’s HTML rather than as CSS pseudo-elements in Icon Fonts
- Auto Accessibility – SVG supports this feature by default rather than only in a kit
- Advanced Features – SVG supports features such as Power Transforms, Masking, and Layering whereas Icon Fonts do not
- 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.