Skip to content
Font Awesome Docs

Data Attributes

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

Usage

Section titled “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
  src="https://example.com/fontawesome/v6.6.0/js/conflict-detection.js"
  data-fa-detection-timeout="12345">
</script>

data-fa-detection-timeout

Section titled “data-fa-detection-timeout”

A convenience for setting the timeout using an attribute.

This will set the timeout to 1000 milliseconds:

<script
  src="https://example.com/fontawesome/v6.6.0/js/conflict-detection.js"
  data-fa-detection-timeout="1000">
</script>

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

Section titled “data-fa-detection-results-collection-max-wait”

A convenience for setting resultsCollectionMaxWait using an attribute.

This will set it to 3000 milliseconds:

<script
  src="https://example.com/fontawesome/v6.6.0/js/conflict-detection.js"
  data-fa-detection-results-collection-max-wait="3000">
</script>

data-fa-detection-ignore

Section titled “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>
      body { font-size: large; }
    </style>
  </head>
  <body>
    <!-- more body content would be here -->
    <script
      src="https://example.com/fontawesome/v6.6.0/js/conflict-detection.js">
    </script>
  </body>
</html>