Add code snippets for usage via CSS variables

[LeaVerou]

Related to #1760.

While my initial thinking was to generate definitions, including a CSS file with thousands of CSS variables on the :root can make inspecting the root via devtools quite painful, and would weigh quite a bit (basically double the current boostrap-icons.css).
Therefore, it would probably need to be a separate file. But then, you'd need a third file to include both, for rapid prototyping.

I figured a quicker route and a much smaller change is to simply include both snippets on the docs, which makes it far less tedious for users to build their own CSS file.

In terms of IA, since this also requires the icon font, I figured it would go under "Icon font", and not after "Copy HTML" as a separate "Copy CSS" section (my initial thought). To avoid pushing the "Code point" section below the fold, I moved it up, since it's quite small.

Screenshot:

And with "See example" expanded:

Happy to make any changes needed!

Preview: https://deploy-preview-1924--bootstrap-icons.netlify.app/

[XhmikosR]

Thanks, looking good! I'll wait for @mdo to check it out too.

BTW, I've been meaning to switch to the icon font in single.html, but I recall I hit some alignment issues. Not related to this PR, but it should make the single icon pages smaller instead of using the inline SVG multiple times.

[LeaVerou]

Thanks!

Btw I suspect the copy could be better, but I figured I better ship it 🐿️ soon and we can iterate together on what's there rather than endlessly massage the wording in isolation.