CSS for SVG sprites

[Crissov]

fixes #14279

New files in /css/ (which could be moved into /sprites/ instead):

• sprites[-regular|-solid|-brands].css

  • 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 :root and are thus available anywhere.
  • They point an url() to the respective symbol in one of the three SVG files found in /sprites/.
  • These variables can be used by authors at will.
  • A possible addition (at least for Pro) would be setting all --fa-name variables locally to one of the 3+ variants by class:

    .far { --fa-foo: var(--far-foo); }
    .fas { --fa-foo: var(--fas-foo); }
    .fab { --fa-foo: var(--fab-foo); }

• fa-symbol[-regular|-solid|-brands].css

  • Leanest variant.
  • 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

---

I understand that:

• I'm submitting this PR for reference only. It shows an example of what I'd like to see changed but
  I understand that it will not be merged and I will not be listed as a contributor on this project.