Changing Wagtail Userbar Icon

Question

How to change Wagtail Userbar Icon? I want to make it more personalize but I don't know how since I am new in web development.

Wagtail Userbar Icon

Answer 1

For some reason the accepted answer stopped working for me in the latest version of Wagtail. Rather than figure out why, I found a simpler solution:

Create wagtailadmin/userbar/base.html:

{% extends "wagtailadmin/userbar/base.html" %}

{% load wagtailadmin_tags i18n %}

{% block branding_logo %}
  <div style="display: none">
    <svg>
        <defs>
          <!-- Replace 'wagtail.svg' with whatever you want from the icons directory, e.g. 'cogs.svg' -->
          {% include "wagtailadmin/icons/cogs.svg" %}
          {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
          {% include "wagtailadmin/icons/edit.svg" %}
          {% include "wagtailadmin/icons/plus.svg" %}
          {% include "wagtailadmin/icons/tick.svg" %}
          {% include "wagtailadmin/icons/cross.svg" %}
        </defs>
    </svg>
  </div>
  <!-- Update the icon name -->
  {% icon name="cogs" class_name="wagtail-userbar-icon" %}
{% endblock %}

Answer 2

You can also modify wagtail's icon font. Then you don't have to touch any of the code.

The font file is at https://github.com/wagtail/wagtail/blob/8e0b2f6d1da6c18ad1aaaa8366f02e6c8cf76027/wagtail/admin/static_src/wagtailadmin/fonts/wagtail-icomoon.json

I used a slightly modified version of the instructions at https://github.com/wagtail/wagtail/wiki/Adding-new-icon

• go to https://icomoon.io/app/
• hamburger menu -> Manage project -> Import project
• open the font
• Rename 'Untitled Project 1' to 'Wagtail'
• click 'Load'
• switch to the edit tool and select the bird icon (there are two of them. The one you want will be named uni56)
• Click replace and choose an svg to replace it with. (I just downloaded one from the icomoon library)
• From the hamburger menu next to Wagtail, 'select all', then 'Generate font'
• Unpack the zip file, and copy the contents of the 'fonts' folder to static/wagtailadmin/fonts/ in any of your apps

as long as your app comes before wagtail.admin in INSTALLED_APPS it will use your modified font instead modified icon