Question

如何更改Wagtail用户栏图标？我想让它变得更个性化，但我不知道自从我开始进行网络开发以后。

Answer 1

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

然后在模板中删除对 wagtail-icon CSS类的调用，该类插入Wagtail徽标，并插入您的图标，在这种情况下是一个fontawesome铅笔图标......

    <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是什么，或点击鸟可能会象征什么。< / p>

Answer 2

您还可以修改w的图标字体。然后，您无需触摸任何代码。

字体文件位于 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/
汉堡菜单->管理项目->导入项目
打开字体
将“无标题项目1”重命名为“ Wagtail”
点击“加载”
切换到编辑工具并选择鸟形图标（其中有两个。想要的一个将被命名为uni56）
单击“替换”，然后选择要替换的svg。（我刚刚从icomoon库下载了一个）
从Wagtail旁边的汉堡菜单中，“全选”，然后“生成字体”
解压缩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用户栏图标

3 个答案: