3.4.1 Zabbix5.0: 更换logo

3.4.1 Zabbix5.0: 更换logo

涉及修改的文件

查看以及查找ico文件存储路径：

[root@zh-cjh ~]# find / -name img

/usr/share/doc/HTML/en-US/img

/usr/share/doc/HTML/img

/usr/share/zabbix/assets/img

[root@zh-cjh ~]#

[root@zh-cjh ~]# find / -name favicon.ico

/usr/share/zabbix/favicon.ico

[root@zh-cjh ~]#

备份原来的相关资源：

[root@zh-cjh zabbix]# pwd

/usr/share/zabbix

[root@zh-cjh zabbix]# cp favicon.ico favicon.icobackup20210705

[root@zh-cjh assets]# cp -R img imgbackup20210705

[root@zh-cjh assets]# ls

fonts  img  imgbackup20210705  styles

[root@zh-cjh assets]#

[root@zh-cjh assets]#

[root@zh-cjh assets]# cd img

[root@zh-cjh img]# ls

apple-touch-icon-120x120-precomposed.png  browser-sprite.png

apple-touch-icon-152x152-precomposed.png  icon-sprite.svg

apple-touch-icon-180x180-precomposed.png  ms-tile-144x144.png

apple-touch-icon-76x76-precomposed.png    touch-icon-192x192.png

[root@zh-cjh img]#

[root@zh-cjh img]# pwd

/usr/share/zabbix/assets/img

[root@zh-cjh img]#

原来的图片：

更换后的图片：

如下图所示，ICO文件已经更换成功。

SVG

SVG 指可伸缩矢量图形， 用来定义用于网络的基于矢量的图形， 使用 XML 格式定义图形 ，图像在放大或改变尺寸的情况下其图形质量不会有所损失。

可以使用浏览器打开svg文件进行查看。

由于svg是矢量图文件，一般的图片查看工具无法打开，使用Adobe Illustrator可以查看而且能够再次编辑svg文件，还能导出保存为svg或其他格式的文件。

可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。（

用svg工具修改文件的zabbix

在线编辑工具：https://c.runoob.com/more/svgeditor

使用浏览器查看icon-sprite.svg

使用工具进行编辑后的效果：

更换icon-sprite.svg文件后进行测试：logo没有方法显示出来，所以这个方法失败，需要更换另外一个方法。

换一种方法：恢复原来的icon-sprite.svg文件。直接调用logo.png文件

/zabbix/assets/styles/blue-theme.css

相关文件：

/zabbix/assets/styles/blue-theme.css

/zabbix/assets/img/icon-sprite.svg

原来的：

.zabbix-logo {

  width: 114px;

  height: 30px;

  background: url("../img/icon-sprite.svg?20200407") no-repeat 0 -864px; }

.zabbix-sidebar-logo {

  width: 91px;

  height: 24px;

  background: url("../img/icon-sprite.svg?20200407") no-repeat -570px -400px; }

.zabbix-sidebar-logo-compact {

  width: 24px;

  height: 24px;

  background: url("../img/icon-sprite.svg?20200407") no-repeat -540px -400px; }

修改后的：

.zabbix-logo {

  width: 120px;

  height: 30px;

  background: url("../img/logo-1.png") no-repeat;

background-size:100% 100%;}

.zabbix-sidebar-logo {

  width: 91px;

  height: 24px;

  background: url("../img/logo-2.png") no-repeat;

  background-size:100% 100%;}

.zabbix-sidebar-logo-compact {

  width: 24px;

  height: 24px;

  background: url("../img/logo-3.png") no-repeat;

  background-size:100% 100%;}

Zabbix5（列表、list、全）zabbixlist
http://www.zh-cjh.com/wenzhangguilei/722.html
文章归类、所有文章列表、LISTLIST
http://www.zh-cjh.com/wangzhangonggao/2195.html