glyphicons

Bootstrap-Specific HTML

Because both Sherman and Hale 2015 are Cornerstone-based sites, they support the features that come with the Boostrap 3 framework.  These features include, but are not limited to the following:

For additional information about the features that Boostrap 3 has to offer, you can visit the Bootstrap 3.3.4 website.

Glyphicons Guide

Glyphicons is a library of icons that can be added to links, headers, and buttons with a just bit of HTML. By adding classes to links, headings, or buttons, you can quickly draw attention to a section of your site.

Adding Glyphicons to Your Site

For sites using Cornerstone-based themes like Sherman and Hale 2015, site webmasters can add any of the glyphicons from Bootstrap 3. Go to the glyphicons website to search for glyphicons. When you find one you want to use, simply click on it and a code will appear for you to copy. Copy that code and paste it where you want the glyphicon to show up! It must be pasted in the text editor of the page's or post's edit screen.

Feel free to browse all the glyphicons on glyphicons.com. However, if you know what you're looking for, you can type keywords into the search bar at the top.

Example: up-arrow glyphicon

  1. Type "arrow" into the search bar
  2. Click on the desired icon and copy the HTML that appears

    The following is the full line of HTML that was copied:

    <span class="glyphicons glyphicons-arrow-up"></span>
  3. Paste that line of code into the text editor view of your page's edit screen:
Note: switching back to the visual editor after pasting a glyphicon code may result in the deletion of the code itself.

Styling Glyphicons

General

If you want to target all glyphicons on your site, you may do so using the .glyphicons class. For example, to change the size of all glyphicons to 24px, you would need to add the following to your Custom CSS:

.glyphicons{
font-size:24px;
}

Style by Type

To target only a specific type of glyphicon (such as the up arrow that was used in the previous example), you should do so using all of the classes that appear in its HTML code. For example, the code for the up arrow glyphicon is <span class="glyphicons glyphicons-arrow-up"></span>. The two classes that appear (separated by a space) are "glyphicons" and "glyphicons-arrow-up". Therefore, to target this glyphicon in our Custom CSS, we add a period before each class and remove the space inbetween:

.glyphicons.glyphicons-arrow-up{
font-size:24px;
}

Style by Instance

You can always add additional classes to certain glyphicons to get even more specific. For example, say I want to paste another up arrow glyphicon which I want to be blue, but I do not want the other one on this page to change its color. I can add a class "blue-glyphicon" which would result in the following HTML code:

<span class="glyphicons glyphicons-arrow-up blue-glyphicon"></span>

And I would target this glyphicon in my Custom CSS by adding the following CSS code:

.glyphicons.glyphicons-arrow-up.blue-glyphicon{
color:blue;
}

Now I will add the HTML to this page, resulting in a blue up arrow:

Hale and Prudence Themes

The Hale & Prudence themes were built with Bootstrap 2 and can therefore use any of the Bootstrap 2 Glyphicons. Add them using html like that shown below, swapping out the classes as described in the Bootstrap 2 website.

<i class="icon-search icon-white"></i>

Developers

Developers can make use of glyphicons in their custom themes by referencing to the centrally located global files available within their development sandboxes.