Provide font-family format

The “You can also use the SVG within your CSS” use case doesn’t allow for color customization without touching the SVG fill value. We should be able to dynamically load the untouched source SVGs and customize them via css only (like when you import Bootstrap without modifying it and properly override variables), which would be possible via a font-family approach (allowing the use of Bootstrap color variables for proper icons theming). Is this in the pipeline?

[nikhil-bhandari]

I have been using bootstrap since 2.X and recently switched from 3.X to 4.X for a new project and noticed that icons are in a different repository now and in order to include them you need to copy the svg code from the website and then use it.

I’m trying to get used to it, but I would love to see something similar to the old way of using icons.

Some features that I loved about old system

1. Adding any icon was as simple as writing following line of code.

    <i class="glyphicon glyphicon-trash"></i>

1. There was no need to access the documentation to lookup icons. Modern IDE’s helped with autocomplete and since icon names are easy to remember often I could simply type the classname and use straightaway.

2. Bootstrap documentation was already present in node_modules so finding icons offline was also very easy.

I was about to suggest css-tricks article but then I saw this github article which also makes sense.

1. Embedding the entire “svgstore” in every view and using <use> — It just didn’t feel quite right to embed every SVG shape we have on every single page throughout GitHub.com especially if a page didn’t include a single icon.

Now I’m planning to right a script that generates the css for me using svg icons in this repo so that I can add icons to the project the old way.

<i class="bi bi-trash"></i>

[mdo]

Never made a font before, so unsure what it all entails. For the time being, I’m planning stick to SVG until things are a little more stable with the icons themselves. Agreed on SVG customization options being quite limited.