+ CSS images are set by classes.
+ No CSS variables are used.
+ The type of image (i.e. *background, list-style* or *content*)
is predefined for some (HTML) element and class combinations:
* **(`dt`|`dd`|`li`)**`.fa`[`r`|`s`|`b`]*`-name`* use `list-style-image`
* **`.i`**`.fa`[`r`|`s`|`b`]*`-name`* use `background-image`
* **`.a`**`.fa`[`r`|`s`|`b`]*`-name`* use `content` *after* element content
* **(`.b`|`i`)**`.fa`[`r`|`s`|`b`]*`-name`* use `content` *before* element content
* **`summary`**`.fa`[`r`|`s`|`b`]*`-name`* use `content` for *marker* box
**`sprites-var`**[`-regular`|`-solid`|`-brands`]**`.css`**
+ CSS variables `--fa`[`r`|`s`|`b`]*`-name`* are defined
for all Font Awesome Free symbols
inside `:root` and are thus available anywhere.
+ They point a `url()` to the respective symbol
in one of the three SVG files found in `/sprites/`.
+ These variables can be used by authors at will.
**`fa-symbol`**[`-regular`|`-solid`|`-brands`]**`.css`**
+ CSS variable `--fa-symbol` is set by classes.
+ The variable can be used with `var(--fa-symbol)` which is predefined for some element and class combinations:
* **(`dt`|`dd`|`li`)**`.fa`[`r`|`s`|`b`] use `list-style-image`
* **`.i`**`.fa`[`r`|`s`|`b`] uses `background-image`
* **`.a`**`.fa`[`r`|`s`|`b`] uses `content` *after* element content
* **(`.b`|`i`)**`.fa`[`r`|`s`|`b`] use `content` *before* element content
* **`summary`**`.fa`[`r`|`s`|`b`] use `content` for *marker* box
