0

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.

abustamam
  • 1,597
  • 2
  • 13
  • 21

1 Answers1

2

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.

David Jacquel
  • 51,670
  • 6
  • 121
  • 147
  • OK, that makes sense, but my stylesheets are calling for said fonts in `@font-face`. Am I missing something in my `bootstrap.css`? I don't think I would be since it's what came default but ya never know. – abustamam Jul 29 '14 at 06:35
  • But that's the thing, I am using glyphicons. I have an empty `` tag and I double checked to make sure that the class existed in `bootstrap.css`. – abustamam Jul 29 '14 at 13:15
  • So, I need to see your base code or the resulting build. – David Jacquel Jul 29 '14 at 15:05
  • Ah, actually I see my error. My `span` read this: ``. The error was that a carat made it into the classname. Wow. Thanks David! – abustamam Jul 29 '14 at 17:31