Glyphicons in bootstrap

ztevie

Hi!
I'm stuck.... I downloaded a build with pretty much everything incl. bootstrap styling and local files. Not the bootstrap library vause it's already included in my project and in the pages. I already have all the glyphicon libraries and they're working in the project everywhere.
When I paste the whole Datatables folder to my project, and initialize a table in one of my pages, everything works and I get the table on the page but I can't see the bootstrap glyphicon sorting icons?
I've tried to scan the files for some sort of reference but can't find anything.
I should mention that when I download a build without bootstrap the table shows up with the standard sorting images and everything works as expected.

Also, I'm a bit confused as to which files I should include in the pages where I use datatables? I assume I wold only need the DataTables/datatables.css and DataTables/datatables.js? Seems everything is packaged in those and the files in Datatables-1.10.12 are merely separate files not needed since I made choices in the build download?
I have tried to include files from there as well but the result is the same...

Appreciate any help...

EDIT: I have read the bit about providing an example, but in this case it's not a matter of a bug or something wrong in Datatable itself. It's just something wrong with the path to where datatables can find the icons. I do get a small "non-image" where the icons are supposed to be, so the code in datatables.css can't find the icons...
My glyphicons are placed in root/css/fonts. Datatables folder is directly under root.

allan

The DataTables CSS doesn't refer to the path for the icons at all:

    .sorting,
    .sorting_asc,
    .sorting_desc,
    .sorting_asc_disabled,
    .sorting_desc_disabled {
        cursor: pointer;
        position: relative;

        &:after {
            position: absolute;
            bottom: 8px;
            right: 8px;
            display: block;
            font-family: 'Glyphicons Halflings';
            opacity: 0.5;
        }
    }

    .sorting:after {
        opacity: 0.2;
        content: "\e150"; /* sort */
    }

    .sorting_asc:after {
        content: "\e155"; /* sort-by-attributes */
    }

    .sorting_desc:after {
        content: "\e156"; /* sort-by-attributes-alt */
    }

If you can use the glyphicons else where on the page, they should automatically work in the DataTable.

Can you give me a link to the page so I can take a look?

Allan

ztevie

Yes, that was what I thought. I've also seen this part of the code.
Sorry, the project being under development on localhost here without possibility to get access from the outside.

One thing I thought of is this: Altough the bootstrap main library is included unaltered, there is a css file that shortens the icon names, so instead of setting class in HTML like this: class="glyphicon glyphicon-sort" it's written: class="gi gi-sort"

So maybe there's a url in there and the fonts aren't in the right folder for the normal bootstrap library to find them. I will check that and post back...

allan

Right right clicking on one of the header cells in the table and select "Inspect". Change the class name to match the shortened version and see if the icon appears.

Allan

ztevie

Yep it did! class "hi hi-sort" made the double arrows appear...

ztevie

On the other hand, if I use something like "glyphicon glyphicon-user" nothing shows. The same if I do it outside of datatables, just in some random HTML element, so clearly the call for glyphicons are changed totally.
It's a big project so I won't try to go in and change anything. If you have some tip I'll try it, otherwise I'll just skip the bootstrap version and use the normal styled datatables.
Are there other things I won't be able to do without bootstrap, thinking mostly like the example with tabs you've got on your site?

Edit: The base of this project is built on a template dashboard, ProUI. They have examples of datatables in the template but they don't use the bootstrap styling. Here's a live demo if it helps. I'm a server side programmer so I'm not an expert on the client side stuff.
http://preview.themeforest.net/item/proui-responsive-bootstrap-admin-template/full_screen_preview/6769035?_ga=1.120765515.217128931.1476989006

I've been thinking of buying the editor version of datatables, but it might not be of much help since I've already coded the basic server side stuff, including classes for pdo sql and other major things.
Would the editor be of big help for the client side work, especially editing rows by opening row data in bootstrap modals? Also dynamic tables where table headers and columns are dynamically created depending on what the database returns?

allan

So something is changing the names of the default Bootstrap classes? In that case, you'd need to modify the DataTables / Bootstrap integration to match the modified class names.

It seems like a very odd thing for the template author to have done since it will break icons in anything that supports the Bootstrap standard class names.

Would the editor be of big help for the client side work, especially editing rows by opening row data in bootstrap modals?

Possibly! It might be worth downloading the demo and seeing what you think.

Also dynamic tables where table headers and columns are dynamically created depending on what the database returns?

That is not something that Editor does, but there is no reason it can't be done with Editor and DataTables using their APIs and options.

Allan

ztevie

Yes, agree it's not optimal to change such a fundamental thing of bootstrap.
I have contacted the author, let's see if they have some advice...
Il try the editor demo when i get to that point in development.
Thanks anyway, we'll consider this question answered...

ztevie

The author of the template had the solution. The fault not because the classes are changed. The problem was that the glyphicon premium version is included in the template, not the free one that is in bootstrap. So I had to change the datatables.css font-family to Glyphicons Regular, and the content icons to E404, E409 and E410.
So all is good now!

allan

Fantastic - thanks for letting me know about that. I'll take a look into if I can incorporate that into my stylesheet.

Allan