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

Advertisement

Before You Get Started

This API is for developers writing code that uses the Conflict Detection API. Everyone else can use Conflict Detection.

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://your-site-or-cdn.com/fontawesome/vVERSION/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.

Advertisement

You're viewing the Version 6 Beta

It's all the awesome of 5, but now more six-y! Version 6 brings over 13,000 icons across 5 styles – including the new Thin style! – and includes more and faster services.

Get the Deets on Version 6

Head Back to Our Current Version 5 Release

Need a Hand?

If you’re stuck or have a question, check our Troubleshooting docs, all of the Font Awesome threads on Stack Overflow, or contact our community on GitHub.

Or get Real Human Support™ with a Pro Subscription!