Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS for SVG sprites #15162

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

CSS for SVG sprites #15162

wants to merge 3 commits into from

Commits on Jun 17, 2019

  1. Create fa-symbol[-regular|-solid|-brands].css 

    **`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
    @Crissov
    Crissov committed Jun 17, 2019
    Configuration menu
    Copy the full SHA
    efbb1a9 View commit details
    Browse the repository at this point in the history

  2. Create sprites-var[-regular|-solid|-brands].css 

    **`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.
    @Crissov
    Crissov committed Jun 17, 2019
    Configuration menu
    Copy the full SHA
    7fab0b3 View commit details
    Browse the repository at this point in the history

  3. Create sprites[-regular|-solid|-brands].css 

    + 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
    @Crissov
    Crissov committed Jun 17, 2019
    Configuration menu
    Copy the full SHA
    e7d2759 View commit details
    Browse the repository at this point in the history