Provide font-family format

[inwardmovement]

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?

[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.

[inwardmovement]

The simple icon-font-generator npm package should do the job with minimal coding (I also spoted some Webpack or Gulp equivalent out there).

Also see this article to optimize an icon font with appropriate CSS.

[BassemN]

Yes, the icon font will make life easier when implementing into websites.

[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>

2. 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.

3. 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.

4. Embedding the entire “svgstore” in every view and using — 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>

[marcelolx]

For rails i've created a helper to use bootstrap icons in a easy way. https://github.com/marcelolx/bootstrap-icons

[Creativaholic]

We tried to convert the collection into a font, used the icomoon app to generate the font icons, however some icons do not get generated properly where some paths are missing or some anchor points get distorted (like the person-dash -> https://www.dropbox.com/s/tak8k6lmc6ykxoz/Screenshot%202020-06-04%2012.24.35.png?dl=0). Tried to open them in illustrator to fix them which resulted on having all icons distorted (worst outcome). icomoon app does a good job so far except for a few. For example the "archive-fill" is missing the gap line -> https://www.dropbox.com/s/2zf8dbian3vhnzj/Screenshot%202020-06-04%2012.25.19.png?dl=0, or some fill circle icons disappear and end up having the circle fill only - same with the diamond, octagon, hexagon etc...

[goelfy]

Adjusting the direction of the contour solves some problems. nfroidure/svgicons2svgfont#62 (comment)