Here are the data attributes that our Conflict Detection API supports.

Advertisement

Usage

The data-* attributes may be applied to the <script> tag that loads conflict-detection.js.

For example, this shows how to adjust the timeout with the data-fa-detection-timeout attribute.

  <script
    type="text/javascript"
    src="https://your-site-or-cdn.com/fontawesome/vVERSION/js/conflict-detection.js"
    data-fa-detection-timeout="12345">
  </script>

data-fa-detection-timeout

A convenience for setting the timeout using an attribute.

This will set the timeout to 1000 milliseconds:

  <script
    type="text/javascript"
    src="https://your-site-or-cdn.com/fontawesome/vVERSION/js/conflict-detection.js"
    data-fa-detection-timeout="1000">
  </script>

data-fa-detection-results-collection-max-wait

A convenience for setting resultsCollectionMaxWait using an attribute.

This will set it to 3000 milliseconds:

  <script
    type="text/javascript"
    src="https://your-site-or-cdn.com/fontawesome/vVERSION/js/conflict-detection.js"
    data-fa-detection-results-collection-max-wait="3000">
  </script>
Advertisement

data-fa-detection-ignore

Apply this attribute to any <style>, <link>, or <script> tag that you want the conflict detector to ignore.

The conflict-detection.js <script> knows to ignore itself, with or without this attribute.

In this example, we'll ignore a style that we know is not a conflict:

  <html>
    <head>
      <!-- We know this style will not conflict with Font Awesome. -->
      <style data-fa-detection-ignore type="text/css">
        body { font-size: large; }
      </style>
    </head>
    <body>
      <!-- more body content would be here -->
      <script
        type="text/javascript"
        src="https://your-site-or-cdn.com/fontawesome/vVERSION/js/conflict-detection.js">
      </script>
    </body>
  </html>

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!