更改 Wagtail 用户栏图标

Question

如何更改 Wagtail 用户栏图标？我想让它更加个性化，但我不知道怎么做，因为我是网络开发的新手。

Wagtail Userbar Icon

Answer 1

您也可以插入一个 FontAwesome 图标，只需在您的 Django 应用程序模板文件夹之一中创建 HTML 页面 wagtailadmin/userbar/base.html。这将覆盖 Wagtail 提供的 html。

然后在模板中删除对 wagtail-icon CSS class 的调用，它会插入 Wagtail 徽标，并插入您的图标，在这个案例是一个字体很棒的铅笔图标 ...

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

Fontawesome 图像的

Here is how to adjust size etc，在本例中 fa-2x 将铅笔的尺寸加倍。

可以通过编辑 div class 来使用 Wagtails 内置编辑图标 ...

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

虽然 FontAwesome 方法提供了更多选项。

注意： 如前所述，这会造成可维护性问题，但是此更改会提高 IMO 可用性，因为大多数用户不了解 Wagtail CMS 是什么，或者单击什么鸟可能象征。

Answer 2

您还可以修改wagtail的图标字体。然后您不必触摸任何代码。

字体文件位于 https://github.com/wagtail/wagtail/blob/8e0b2f6d1da6c18ad1aaaa8366f02e6c8cf76027/wagtail/admin/static_src/wagtailadmin/fonts/wagtail-icomoon.json

我使用了 https://github.com/wagtail/wagtail/wiki/Adding-new-icon

中的说明的略微修改版本

转到https://icomoon.io/app/
汉堡菜单 -> 管理项目 -> 导入项目
打开字体
将 'Untitled Project 1' 重命名为 'Wagtail'
点击'Load'
切换到编辑工具和select小鸟图标（有两个，你要的那个就命名为uni56）
点击替换并选择一个 svg 来替换它。（我刚刚从icomoon库下载了一个）
从 Wagtail 旁边的汉堡菜单，'select all'，然后 'Generate font'
解压缩 zip 文件，然后将 'fonts' 文件夹的内容复制到任何应用程序中的 static/wagtailadmin/fonts/

只要您的应用出现在 INSTALLED_APPS 中的 wagtail.admin 之前，它就会使用您修改后的字体 modified icon

Answer 3

由于某种原因，接受的答案在最新版本的 Wagtail 中对我不起作用。我没有弄清楚原因，而是找到了一个更简单的解决方案：

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

更改 Wagtail 用户栏图标

Changing Wagtail Userbar Icon

python

django

wagtail