Glyphicons Pro + WordPress Child Themes

I recently decided to upgrade to the Glyphicons Pro to take advantage of 500+ beautiful, web-friendly icons. Twitter Bootstrap (the framework my current WordPress theme is built upon) has limited access to a starter-portion of the Glyphicons. After several months of heavy use (and overall yearning for the full set), I decided to make an investment in an upgrade.

I am using a WordPress Child theme and ran into hours of inheritance issues. When I finally figured it out, I decided I’d be a fool not to write about it (…for the next time I run into this problem).

All of these changes were made to the childTheme files and folders. Without going into too much detail about parent-vs-child themes, I’m making the changes in the childTheme so that if the parentTheme is ever updated, it won’t overwrite my customizations.

FILES and FOLDERS

Within my childTheme, I created two new folders: css/ and fonts/. It’s very possible your child theme already has these folders, but I’ve never manipulated anything beyond the style.css file, so didn’t find a need for these folders.

I moved all of the Glyphicon Regular font files to the font/ folder:

glyphicons-regular.eot
glyphicons-regular.svg
glyphicons-regular.ttf
glyphicons-regular.woff
glyphicons-regular.woff2

I added the following stylesheets to the css/ folder:

bootstap.css — define @font-face
glyphicons-bootstrap.css — bootstrap helper
glyphicons.css — map glyphicon names to location within font file

CODE

style.css

The childTheme/style.css file wasn’t consistently referencing the correct style sheets within the childTheme. To overcome this, I imported the bootstrap.css file, which contains the @font-face class definition, with a mapping to each of the font files.

@import url("css/bootstrap.css"); // force import of bootstrap.css, within the child theme
...
.glyphicons { color: #1abc9c; font-size: 40px; } // pluralized glyphicon to match the pro nomenclature

bootstrap.css

This is the complete bootstrap.css file. The parentTheme bootstrap.css stylesheet is imported, so I am only overwriting the classes relevant to updating Glyphicons Haflings to Glyohicons Regular.

I explicitly imported the related stylesheets to solve inheritance issues. There are probably slicker ways to accomplish this, but this worked perfectly for me.


@import url("../parentTheme/css/bootstrap.css");
@import url("glyphicons.css");
@import url("glyphicons-bootstrap.css");

The parentTheme/fonts/bootstrap.css file contains a similar section of code with Glyphicon Halflings instead of Glyphicons Regular, mapping the @font-family to the correct font files. Here, we’re updating the files to map to the regular Glyphicons files.

@font-face {
font-family: 'Glyphicons Regular';
src: url('../fonts/glyphicons-regular.eot');
src:
url('../fonts/glyphicons-regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/glyphicons-regular.woff') format('woff'),
url('../fonts/glyphicons-regular.ttf') format('truetype'),
url('../fonts/glyphicons-regular.svg#glyphicons-regular') format('svg');
}

Last but not least, these define the style and position of the Glyphicons. This code also lives in the parentTheme/fonts/boottrap.css folder, so I modified it to reference Glyphicons regular.

.glyphicons {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Regular';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz-osx-font-smoothing: grayscale;
}

This started as a personal bookmark for the next time I try to add Glyphicons Pro to a WordPress Child Theme. However, as I was trying to troubleshoot my issues, I realized this is a surprisingly undocumented process. Hoping this helps someone else in the future!

.font face

No one can doubt that web development has come a very long way over the years. As developers, our accomplishments are restricted only by our imaginations and, as empowering a concept, font selection has been the exception to that rule. Font selection for websites is usually limited to the basic serif (i.e. Times New Roman) and san-serif (i.e. Veranda, Arial, etc) fonts to regulate text presentation. I could go into a grand history lesson about typography and how users perceive different fonts but that would be no fun. Instead I want to share a great way to utilize unique font types on the web.

I am a big fan of interesting fonts as a tool to further the reach of my graphic design work. I found DaFont.com a few years ago and have been exploring and downloading fonts for free ever since. The only short coming was my inability to bring these great fonts to my web development work. At the end of the day, no matter how many great fonts I had up my sleeve, I was stuck with the generic serif and san-serif font palatte.

A good friend and experienced web developer introduced me to font-face, a CSS trick that allows web browsers to display unique fonts. The infrastructure for this trick has been around for a while, but few browsers supported it. [More information on the history here, on css3.info] I decided to give it a try with…

Greenbeans

…one of my new favorite fonts from DaFont.

h4 { font-family: Greenbeans; color: #00CC00; font-size: 3.5em; }

@font-face {
font-family: "Greenbeans";
src: url('http://www.monetspells.com/Greenbeans.ttf') format('truetype');
}

The entire process is very simple and only required a font file upload and a url navigation code in the CSS. I decided to create a new header type that would feature the Greenbeans font type and a funky green color (above and below).

The quick brown fox jumps over the lazy dog.

Please note, the font change will be visible for users viewing this page in the most updated versions of Safari, Firefox or Internet Explorer and those who have the font installed. Here is the sample Greenbeans font change in image form if you are using an older browser version…
SentenceExample

Here are some really helpful tutorials and links to get you started with @font-face.

Tutorials and Helpful Links:

1. Web Fonts with @font-face
Web Fonts with @font-face
2. @font-face in the wild
@font-face in the wild
3. @font-face
@font-face
4. www.css3.info [main page]
5. Mozilla Developer Center [main page]

.css-tricks

In the Summer of 2009, I was hired to redesign a Distance Learning website. Wanting to challenge myself, I decided not to grab template and modify the CSS style sheet. Instead, I opted to build the site from scratch starting with a Photoshop MockUp. It was a pretty daunting task considering it was my first time designing and developing a site of this magnitude. Luckily, I found a ton of websites, blogs and tutorials that helped me through the process.

One of the best online tutorials I found was on CSS Tricks from a web developer named Chris Coyier. The tutorials are very easy to understand, very thorough and Chris doesn’t skip any steps so you won’t look up and wonder how he just up and…finished the design. The tutorial is broken into three parts and can be downloaded from the CSS Tricks website (links below).

Part 1
Converting a Photoshop Mockup (1 of 3)
Part 2
Converting a Photoshop Mockup (2 of 3)

Part 3
Converting a Photoshop Mockup (3 of 3)