Glyphicons in Bootstrap 4

Question

I am using Bootstrap 4. I would like to use Glyphicon in Datatable. I included font-awsome.

My CSS code is like below

table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::after {
content: "\e252" !important;
font-family: "Font Awesome 5 Free";
display: inline-block;
padding-right: 3px;
vertical-align: middle;
font-weight: 900;

}

But I am getting output like below

Answer 1

Font Awesome is missing the font files. If you look into the font-awesome.css file you will see it is expecting a fonts folder in its parent directory.

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0'); ...

Expected folder structure -

|- css
|-- bootstrap-4.css
|-- font-awesome.css
|- fonts
|-- font-awesome.eot
|-- font-awesome.ttf
|-- ...