Starting a new project, it was decided to use bootstrap 4 alfa. The code that was used by bootstrap 3 was dragged into the project, and all gliphicon were no longer displayed. How to solve the problem so that the bootstrap 4 displays icons from bootstrap3?

  • A typo is here and partially in response. Need glyphicons via y . glyphicons.com - Gleb Kemarsky

1 answer 1

  1. Download bootstrap 3 from the official repository.
  2. Go to the dist folder and copy the fonts folder to your project root or wherever you want.
  3. Go to the less folder and locate the glyphicons.less file glyphicons.less
  4. Since I use sass I created the _fonts.scss file and wrote into it

The following code:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('../fonts/glyphicons-halflings-regular.eot'); src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg'); }

after that, I inserted the contents of the glyphicons.less file, removing the font connection from it — this is the piece of code:

 @font-face { font-family: 'Glyphicons Halflings'; src: url('@{icon-font-path}@{icon-font-name}.eot'); src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'), url('@{icon-font-path}@{icon-font-name}.woff2') format('woff2'), url('@{icon-font-path}@{icon-font-name}.woff') format('woff'), url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'), url('@{icon-font-path}@{icon-font-name}.svg#@{icon-font-svg-id}') format('svg'); }

left everything else as it was.

  1. I connected the resulting fonts.scss file to the assembly file, started the compilation in my case, did compass