CODEWITHSUNDEEP
pythondjangowagtail
Sidnetopia
Sidnetopia

Reputation: 97

Changing Wagtail Userbar Icon

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

Upvotes: 4

Views: 2279

Answers (3)

alstr
alstr

Reputation: 1556

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 %}

Upvotes: 3

ThePiGuy
ThePiGuy

Reputation: 42

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

Upvotes: 2

Inyoka
Inyoka

Reputation: 1446

You can also insert a FontAwesome icon instead, just create the HTML page wagtailadmin/userbar/base.html in one of your Django app templates folders. This will override the html provided by Wagtail.

Then in the template delete the call to the wagtail-icon CSS class, which inserts the Wagtail logo, and insert your icon, in this case a fontawesome pencil icon ...

    <div class="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
        <i class="fas fa-pencil-alt fa-2x"></i>
        <span class="wagtail-userbar-help-text">
        {% trans 'My personal admin interface' %}
        </span>
    </div>

enter image description here

Here is how to adjust size etc of the Fontawesome image, in this case fa-2x doubles the size of the pencil.

Wagtails built-in edit icon can be used by editing the div class like so ...

<div class="wagtail-userbar-trigger wagtail-icon wagtail-icon-edit" data-wagtail-userbar-trigger>

enter image description here

The FontAwesome method provides more options though.

Note: As mentioned this creates a maintainability issue, however IMO usability would be increased by this change, as most users do not understand what Wagtail CMS is, or what clicking a bird might symbolise.

Upvotes: 2

Related Questions