# How to Configure Font Awesome 7: Data Attributes vs JavaScript Config Object > Learn to configure Font Awesome 7 using data attributes or a JavaScript config object. Discover how both methods merge into the internal config proxy for dynamic access. - Repository: [Font Awesome/Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - Tags: how-to-guide - Published: 2026-03-01 --- **Configure Font Awesome 7 before the library loads by either adding data attributes to the ` ``` The `getAttrConfig` function in [`js/fontawesome.js`](https://github.com/FortAwesome/Font-Awesome/blob/main/js/fontawesome.js) processes these attributes during the initial load phase. ## Configuring Font Awesome 7 with JavaScript Config Object For dynamic or conditional configuration, define `window.FontAwesomeConfig` before the library script executes. ### Setting window.FontAwesomeConfig Define the global configuration object in a preceding script block: ```html ``` According to the source code in [`js/fontawesome.js`](https://github.com/FortAwesome/Font-Awesome/blob/main/js/fontawesome.js) lines 1178–1199, the library merges `window.FontAwesomeConfig` with the internal `_default` object using the spread operator `..._default, ...initial`, where `initial` represents the global config. ### Runtime Configuration Updates After Font Awesome 7 loads, the `config` object becomes a reactive proxy. You can modify settings dynamically, and the library adjusts behavior immediately: ```javascript // Access the config object after Font Awesome is loaded FontAwesome.config.autoAddCss = true; // Enable CSS injection retroactively FontAwesome.config.showMissingIcons = false; // Silence missing icon warnings FontAwesome.config.observeMutations = false; // Disable DOM observer ``` The proxy implementation in [`js/fontawesome.js`](https://github.com/FortAwesome/Font-Awesome/blob/main/js/fontawesome.js) lines 1200–1215 ensures that setters trigger internal callbacks, updating the processing pipeline without requiring a page reload. ## Configuration Precedence and Merge Logic When both data attributes and `window.FontAwesomeConfig` are present, Font Awesome 7 applies the following merge strategy: 1. **Internal defaults** (`_default` object) provide the base layer. 2. **Data attributes** on the script tag are parsed and stored in `initial`. 3. **Global config** (`window.FontAwesomeConfig`) is also merged into `initial`. 4. **Final spread**: The config object becomes `{ ..._default, ...initial }`, meaning explicit settings override defaults. If the same key is defined in both data attributes and the JavaScript config object, the last one processed in the merge chain takes precedence. Since `window.FontAwesomeConfig` is merged after attribute extraction in the initialization flow, JavaScript values typically override data attributes when conflicts occur. ## Summary - **Data attributes** provide declarative configuration directly on the `