# Data Attributes

Documentation for data attributes used in Font Awesome conflict detection.

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

## 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`](/apis/conflict-detection/properties.md#timeout) with the [`data-fa-detection-timeout`](/apis/conflict-detection/data-attributes.md#data-fa-detection-timeout) attribute.

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

## data-fa-detection-timeout

_A convenience for setting the [`timeout`](/apis/conflict-detection/properties.md#timeout) using an attribute._

This will set the timeout to 1000 milliseconds:

```html
<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

_A convenience for setting [`resultsCollectionMaxWait`](/apis/conflict-detection/data-attributes.md#data-fa-detection-results-collection-max-wait) using an attribute._

This will set it to 3000 milliseconds:

```html
<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

_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
<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>
```
