How to fix broken pagetree icons in the Web Help Theme

Problem

In the Web Help theme, right-facing arrows in the page tree and Viewport control icons are displayed strangely after updating Confluence.

Explanation

When updating to a newer Confluence version, files which were created with an older version can be encoded incorrectly. Icons in the theme.main.css file have been changed by a Confluence update and need to be replaced manually for now.

This behavior occurs with updates to Confluence versions up to 8.5.3. Updating to Confluence version 8.5.4 or above (from previously unaffected version) should not break the icons.

Resolution

For the default Web Help theme

If there are no customizations in the theme, the whole theme.main.css can be replaced with the default Web-Help-Theme file. You can download the current version from a copy of the default Web-Help-Theme by going to the theme editor, highlighting the theme.main.css file located in assets > css and choosing Download in the Actions dropdown menu.

For a custom theme

If you are using a customized theme for your Viewport, you’ll need to manually replace content with the correct strings.

#ht-sidebar .ht-pages-nav ul .ht-pages-nav-toggle:before {
  line-height: 22px;
  content: "\f11c";
}

#ht-sidebar .ht-pages-nav ul .open > .ht-pages-nav-toggle:before {
  line-height: 18px;
  content: "\f15b";
}

.sp-aui-iconfont-close-dialog:before {
  content: "\f11b";
}

.sp-aui-iconfont-arrows-up:before {
  content: "\f109";
}

.sp-aui-iconfont-delete:before {
  content: "\f122";
}

.sp-aui-iconfont-confluence:before {
  content: "\f11f";
  font-size: 18px;
}

.sp-aui-iconfont-approve:before {
  content: "\f104";
}

.sp-aui-iconfont-remove:before {
  content: "\f188";
}

.sp-aui-iconfont-appswitcher:before {
  content: "\f105";
}

.sp-aui-iconfont-group:before {
  content: "\f167";
}

.sp-aui-iconfont-editor-mention:before {
  content: "\f152";
}

.sp-aui-iconfont-user:before {
  content: "\f1ad";
}

.sp-aui-iconfont-flag:before {
  content: "\f165";
}