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!