Django, Python, Linux, Dogs

Wagtail StreamField Icons

November 10th, 2015

There's a few lists of icon names available for Wagtail's StreamField blocks, but I couldn't find any visual representation. Scroll down to view the standard icon library.

When creating a StreamField block, we define an icon to use on buttons for the block in the admin.

class helpBlock(blocks.StructBlock):
    help_field = blocks.CharBlock()
    class Meta:
        icon = "help"

These icons are rendered by a font-family (wagtail, fittingly) using pseudo-elements on css classes. In the stylesheets for the Wagtail admin, you can see how these are rendered. Take the help icon as an example:

.icon-help:before {
  content: "?"; }

That's just stating that within the inner HTML of each of the elements with the class .icon-help, pre-pend a ?. Whatever is entered for the icon property of your block's Meta class will be added as a css class on the rendered button for the block. All of the icons use this method (with different characters for each icon, of course).

The pre-pended character is then rendered via the Wagtail custom font-set.

@font-face {
  font-family: "wagtail";
  src: url("../../wagtailadmin/fonts/wagtail.eot");
  src: url("../../wagtailadmin/fonts/wagtail.eot?#iefix") format("embedded-opentype"), url("../../wagtailadmin/fonts/wagtail.ttf") format("truetype"), url("../../wagtailadmin/fonts/wagtail.svg#wagtail") format("svg"), url("../../wagtailadmin/fonts/wagtail.woff") format("woff");
  font-weight: normal;
  font-style: normal; }

/* fix to make chrome on windows use svg, which renders better */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  @font-face {
    font-family: "wagtail";
    src: url("../../fonts/wagtail.svg#wagtail") format("svg"); }

.icon:before, .icon:after {
    font-family: "wagtail";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none !important;
    speak: none;
    text-decoration: none;
    width: 1.3em;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: left;
    vertical-align: middle;
    margin-right: 0.2em;

With that in mind, customizing or extending the icon set becomes rather simple! Of course, only in very rare cases would this be necessary. Whatever text is entered for the icon property in your block's Meta class will be appended to a .icon- css class name. Using the CSS method above, pre-pend a character for your custom icon. Render that character w/ a font library. Not that there's often a need for this, but when the need arises no need to fret! 

Wagtail StreamField icons

Posted in Wagtail


Want to work together? Send an email.


In addition to building web and in-house applications and systems for Thermaline, I'm on Twitter, LinkedIn and Instagram. Let's talk!

©2018 Ian Price / Red Mountain GIS