Using Custom Icons

Even though Glyphicons includes over 1000 icons, there may be times when it does not include the one you are looking for. We've started some custom CSS that allows you to add your own icon for your web site.

What you need to do is create an icon image the same size as where you'd like it to appear. Then when adding it, select Glyphicons, and add your own class into the field- like say "custom-icon". Then add the following bit of CSS to either your child theme or the Custom CSS box under Theme Options and your custom image will appear:

.glyphicons.custom-icon:before {
  content:url('http://path-to-your-icon.png')
}


Meta box screenshot:

Caveat: This is not vector so you can't change the colour using CSS and it might also not be responsive depending on your custom CSS.