How to change logo of strapi on admin panel left menu?

Question

I am running the strapi project and need to change strapi login screen logo. I have replaced logo in plugins > user-permissions > admin > src > assets > images > logo_strapi.png and running the command npm run setup --plugins but after that it's not loading content-type data it's just giving me loader only

Answer 1

Logo you can overvrite in path -> ./admin/admin/src/assets/images/logo-strapi.png

rember to rebuild project by npm run build command

The AdminUI package source can be easily found in ./node_modules/strapi-admin/src/.

For example, to change the top-left displayed admin panel's color, ./node_modules/strapi-admin/admin/src/components/LeftMenuHeader/styles.scss should be overriden by ./admin/src/components/LeftMenuHeader/styles.scss with your own styles.

Thus, you are replacing the files that would normally be in node_modules/strapi-admin/admin/src and directing them to admin/src/some/file/path.

要应用您的更改，您需要重建管理面板

npm run build

来源

https://github.com/strapi/strapi/issues/3604

https://github.com/strapi/strapi/pull/3609/files

Answer 2

由于这个问题有点旧......在当前版本的Strapi (V4)中，更改左侧菜单的图标的工作方式有点不同（所提供的解决方案是使用 4.0.6 进行测试的）。该解决方案还适用于更改登录屏幕和网站图标上的徽标...

在您的项目中，在其中创建一个extension文件夹，./yourProjectName/src/admin/ 您可以放置​​一个新图像，该图像应该是您的新菜单徽标，即“new-menu-logo.png”

此外，在下面创建一个app.js文件./yourProjectName/src/admin/，然后导入扩展文件夹的图像。例子：

// path: ./yourProjectName/src/admin/app.js

import AuthLogo from './extensions/my-new-logo.png';
import MenuLogo from './extensions/new-menu-logo.png';
// import favicon from './extensions/favicon.ico';

export default {
  config: {
    // Replace the Strapi logo in auth (login) views
    auth: {
      logo: AuthLogo,
    },
   // Replace the favicon
    // head: {
    //   favicon: favicon,
    // },
    // Add a new locale, other than 'en'
    locales: ['fr', 'de'],
    // Replace the Strapi logo in the main navigation
    menu: {
      logo: MenuLogo,
    },
    // Override or extend the theme
    theme: {
      colors: {
        alternative100: '#f6ecfc',
        alternative200: '#e0c1f4',
        alternative500: '#ac73e6',
        alternative600: '#9736e8',
        alternative700: '#8312d1',
        danger700: '#b72b1a'
      },
    },
    // Extend the translations
    translations: {
      fr: {
        'Auth.form.email.label': 'test',
        Users: 'Utilisateurs',
        City: 'CITY (FRENCH)',
        // Customize the label of the Content Manager table.
        Id: 'ID french',
      },
    },
   // Disable video tutorials
    tutorials: false,
   // Disable notifications about new Strapi releases
    notifications: { release: false },
  },

  bootstrap() {},
};

最后用ie重建AdminUIyarn build

官方文档中也有描述：https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#configuration-options

Answer 3

我对 Strapi 很陌生，我一直在寻找如何实现这一目标。根据文档，您需要更改图像./node_modules/strapi-admin/admin/src/assets/images/logo-strapi.png并运行构建管理面板npm run setup