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. The Block Editor does not have Glyphicons configured at this time.

This video shows examples using the Classic Editor.

(See all Aurora WordPress Training.)

Adding Glyphicons to Your Site

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.

Example: up-arrow glyphicon

1. Type "arrow" into the search bar.
   

   Open

   

2. Click on the desired icon and copy the HTML that appears
   
   

   Open

   

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

   <span class="glyphicons glyphicons-arrow-right"></span>

3. Paste that line of code into the text editor view of your page's edit screen:

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, add the following to your Custom CSS:

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 in between:

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:

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