Adding icon font to Jekyll

24 Jan 2016

So, I finally have my blog up and working, but unfortunately, I haven't been able to implement Bootstrap or some other magical theme. It was becoming complicated and frustrating, trying to figure out how to use the different include files and figuring out how to read the style documents. I decided to go with the basic Jekyll set up that I ended up with after following the tutorial that got me set up on Github. This set up includes a basic CSS file, which I feel comfortable reading. It's not very elaborate, but it gets me started and I can do simple things like change colors, fonts, etc.

In this decision, to just go with a plain CSS file for styling, rather than an scss file or less with Bootstrap, I think I've freed myself in a way. It may be more work in the future, but at least I know what everything does and where it goes.

Case in point, icon fonts. Boostrap comes with font-icons built in - or packaged with the download - but since I don't understand how the Bootstrap syles are broken up just yet, I don't feel comfortable using it for now. So if I want icon fonts, I'll have to install them myself.

I found some icon fonts on Elegant Themes. These are meant to work with WordPress, but these should be fine to install.

My goal is to use them in my blog list, instead of using some punctuation like a colon or ellipsis. I tried using them, but I decided I was getting ahead of myself. I'm just sticking to using straight HTML codes for now, and I'll get back to font icons later. The use of animations with the icons is something I'd like to try.

I ended up using Open Sans as the h1, header and footer links, and Lora for the body font. However, I had trouble with the apostrophe. It just didn't render normally, and even including a few different HTML codes - as found on this characters and symbols reference on ascii.cl and this reference at Typewolf.com - it didn't work. So for now, I just have to use a straight quote until I can figure out what is going on. Or, I can never use contractions - I'll just sound like Lt Commander Data from Star Trek.

I like 'Lora' but I am not too keen on 'Open Sans'. It's highly likely I'll end up going with another font in the future. I kind of like 'Lato'.