How to add Font Awesome to your A/B test using plain JavaScript

This article will summarize how to load Font Awesome using plain or vanilla JavaScript. If you’re like me, you’re not using the WYSIWYG editor for A/B testing. You rather write your own clean plain JavaScript code.

Load Font Awesome via JavaScript

This is what you would like to add as a script:

(function() {
'use strict';

  // Insert FontAwesome
  var fontAwesome = document.createElement("script");
  fontAwesome.src = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css";
  document.getElementsByTagName("head")[0].appendChild(fontAwesome);

})();

Code Explained

1. You’ll create an element. This is the script that will be added to the head at the end of the JavaScript.
2. Add the Font Awesome CDN link. The link that I’ve added can be used to find the most recent version of the Font Awesome CDN.
3. Add the script to the head of the website.

Now you’re able to use Font Awesome within your A/B test. This worked with Google Optimize.

Conclusion

It’s easy to load Font Awesome into your A/B test. The code that’s mentioned in this blog has always worked for me. It will definitely work for Google Optimize. I can’t confirm if it works with other A/B testing tools, but I would assume so since it’s plain (Vanilla) JavaScript.

Continue reading if you would like to reduce the loading speed of the Font Awesome script.

Extra: Best Practise

Down below, you can find the compressed version of the script mentioned above. This means the script will load faster. When files load faster, there is less impact on the speed performance of the experiment. In the end, this will lead to more accurate data. More accurate data will lead to better experiment results.

!function(){"use strict";var e=document.createElement("script");e.src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css",document.getElementsByTagName("head")[0].appendChild(e)}();

I hope this article is useful for you! You’re now able to easily implement Font Awesome in your A/B tests.

By the way, before you ask, I’ve just compressed the code mentioned at the beginning of the article with JSCompress. I do this with all my scripts to improve the loading speed of the A/B test.