The glyphicon icons can't show with bootstrap4

[fishen]

The icon 'glyphicon glyphicon-remove-circle' can't show in component tabs , is there any way to replace this class or convert glyphicon icons to fontawesome?

[DouglasWebster]

I had this problem with a project of mine. I solved it by adding a custom style in a file app/styles/sass/app.scss which is included in the styles section of angular-cli.json -

"styles": [
        "styles.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "app/styles/sass/app.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"
      ],

Finally app.scss contains the following `// redifine the glyphicons font family to font-awesome @font-face { font-family: 'Glyphicons Halflings';

src: url('/node-modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0'); src: url('/node-modules/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/node-modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('/node-modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/node-modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/node-modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg'); }

// redifine .glyphicon .glyphicon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

// point glyphicon-remove-circle icon to the neareset font-awesome equivalent .glyphicon-remove-circle:before { content: "\f05c"; }

.glyphicon-chevron-down:before { content: "\f078"; }

.glyphicon-chevron-up:before { content: "\f077"; }

.hidden { display: none !important; } ` The above enabled solved the display problems using Bootstrap 4 as glyphicons are no longer included and, as i was already using fontawesome, I didn't want to add a second set of icons if possible.

I realise the above is probably a bad hack and hopefully someone will point out a better solution; until then this should get you going. For info you can see both the tabs module and the pager module working with fontawesome icons at SB Admin with Angular and BS4. It is only a demo so just press login when the page opens.

[fishen]

Thanks! @DouglasWebster

[DouglasWebster]

I have been doing further work since the reply above and I think it is over complicated. It appears that it is not necessary to redefine the font family; it is sufficient to redefine .glyphicon and point the ones that are required to the relevant fontawesome icons. Hope this helps a bit further.

[Jermanis]

I tried to scope this to one component and it didn't work due to Angular4's View Encapsulation. Defining this at the global level worked correctly.

I'm on v4.13, and used styleUrls (not styles):

"styleUrls": [
        "styles.scss",
        "../node_modules/bootstrap/scss/bootstrap.scss",
        "app/styles/sass/app.scss",
        "../node_modules/font-awesome/scss/font-awesome.scss"
      ],

[tnduc91]

Glyphicon was dropped from Bootstrap 4. You can install another similar css library like Font Awesome for replacement.

Here is a guideline for installing FA.