Search code examples
twitter-bootstrap-3jekylljekyll-bootstrap

Jekyll Bootstrap not importing glyphicons

I just started using Jekyll today and so far I like it.

I'm using one of the default themes (titled simply bootstrap-3) and it seems to compile fine, in terms of file structure.

However, when I run it on my local server (or on github.io), some files are missing, notably the glyphicon fonts that come default with Bootstrap.

The fonts folder exists in both the _site/assets directory as well as the external assets directory, and as far as I knew, the contents of the _site directory were what got served on the server.

However, when I use the Google Dev Tools to look for the assets, I can't find the fonts at all. The CSS is generated fine, but the fonts are not.

Interestingly enough, when I use another theme (like the-project) the fonts are loaded fine.

Glyphicons exist in my bootstrap.min.css, the only thing I can think of is that the url() code is wrong:

src:url('../fonts/glyphicons-halflings-regular.eot') is in my bootstrap.css, and my file structure is set up such that the parent folder does contain the fonts folder.

Here is my directory tree:

bootstrap-3
├── bootstrap
│   ├── css
│   │   ├── bootstrap.min.css
│   │   └── bootstrap.theme.min.css
│   ├── fonts
│   │   ├── glyphicons-halflings-regular.eot
│   │   ├── glyphicons-halflings-regular.svg
│   │   ├── glyphicons-halflings-regular.ttf
│   │   └── glyphicons-halflings-regular.woff
│   └── js
│       └── bootstrap.min.js
└── css
    └── style.css

And here is my output site, I'm wanting to put a glyphicon in the submit button of the contact page (which isn't visible from the main site because I haven't focused on UI yet).

Interestingly enough, when I put a glyphicon somewhere not in the button, it will display.

EDIT: Wow, accidentally put a > in the class name.

Solution

  • If you go to http://getbootstrap.com and watch the network inspector you will not see any font loaded. But if you go to http://getbootstrap.com/components/, you will see them jump in the browser.

    The browser loads fonts only if it needs them (if you use glyphicon-xxx styles). This is called Lazy loading and it avoids loading unnecessary resources.

    Edit : If you don't use glyphicons in you site they're not loaded. The base Jekyll Bootstrap doesn't use glyphicons.

    Try to add in one of your files (eg : pages.html) or a markdown equivalent in index.md and you will see fonts loading in you network inspector.