Skip to content
Font Awesome Docs
Check out the all-new Web Awesome AND get an exclusive lifetime discount on Font Awesome!
Live on Kickstarter!

Get Started

Discover and prevent conflict issues when loading Font Awesome in an environment that might be loading other versions of Font Awesome as well.

The conflict detector uses the global object window.FontAwesomeDetection as an interface for you to configure settings, override functionality, or query results from your code.

Access it by including a <script> tag in your page, before the <script> that loads conflict-detection.js. Assign an object to window.FontAwesomeDetection that has your configs and overrides. Like this:

<html>
  <!-- bunch of stuff -->
  <body>
    <!-- more stuff -->
    <script data-fa-detection-ignore type="text/javascript">
      window.FontAwesomeDetection = {
        timeout: 1000,
        report: function (params) {
          // Do your own reporting here
        }
      }
    </script>


    <script
      type="text/javascript"
      src="https://example.com/fontawesome/v6.5.2/js/conflict-detection.js"
    ></script>
  </body>
</html>

In this example, we set the timeout value, and we also override the report() method. So the conflict detector will wait only 1000 milliseconds instead of the default 2000 for each test before concluding whether it presents a conflict. And when it’s ready to report, it will call this report() instead of the built-in report implementation.