By default, APG vNext displays a standard folder or document icon next to each forum name in the forum listing. You can replace this with a custom image for each forum.
Steps to Set a Forum Image
- Go to Admin Panel → Forums → Edit Forum for the forum you want to customize.
- In the forum settings, find the Forum Image field.
- Upload your desired image (recommended: 32x32 or 48x48 pixels, PNG with transparency).
- Save the forum settings.
Image Storage Location
Forum images are stored in the App_Themes/[ThemeName]/images/forums/ directory. You can also reference existing theme images by entering the image path relative to the theme folder instead of uploading.
CSS Override Method
As an alternative, you can use CSS to replace the default icon for all forums at once. Add this to your theme's CSS file:
.forum-icon { background-image: url('../images/custom-forum-icon.png'); }
For per-forum CSS classes, APG vNext adds a unique class to each forum row in the listing. Use the browser's developer tools to inspect the element and find the correct class name.
Displaying Forum Image Instead of Document Icon in APG vNext
By default, APG vNext forum categories show a small icon (folder, document, lock) in the thread list to indicate forum status. Some administrators prefer to replace these generic icons with custom images - typically the forum's logo, a category-specific illustration, or a badge image. This guide covers replacing the icon with a forum image for all forums or on a per-forum basis.
Setting a Per-Forum Image
- Admin Panel -> Forums -> Edit [Forum Name]
- In the "Forum Image" section, upload an image (recommended: 48x48px PNG)
- Save - the image replaces the default icon in the forum index and category pages
CSS Override for Icon Replacement
/* Replace all forum status icons with custom background images */
.apg-forum-icon-default {
background-image: url('/assets/images/forum-icon-default.png');
background-size: contain;
background-repeat: no-repeat;
width: 48px;
height: 48px;
display: inline-block;
}
/* Per-forum overrides using data attribute: */
[data-forum-id="5"] .apg-forum-icon {
background-image: url('/assets/images/forum-5-icon.webp');
}Using SVG Icons Instead of PNG
SVG icons scale perfectly at all resolutions (important for Retina displays) and are typically 5-10x smaller in file size than PNG equivalents:
<!-- In forum listing template: -->
<img src="/assets/icons/forum-support.svg"
alt="Support Forum"
width="48" height="48"
class="apg-forum-icon" />Animated GIF and WebP Forum Icons
APG vNext supports animated GIF and WebP icons for forums with dynamic content. A subtle animation (e.g., a blinking notification indicator) can draw attention to forums with new posts. Use animation sparingly — overly animated icons are distracting and can trigger accessibility issues for members with motion sensitivity. Always respect the member's prefers-reduced-motion CSS preference by disabling animations when requested:
@media (prefers-reduced-motion: reduce) {
.apg-forum-icon img {
animation: none;
/* Fallback: show the first frame only (handled by most browsers natively) */
}
}Forum Icon Accessibility Requirements
All forum icon images must include descriptive alt text. A blank or missing alt attribute on a forum icon fails WCAG 2.1 Level A accessibility compliance. The alt text should describe the icon's purpose, not its appearance — for example, alt="Support Forum" rather than alt="blue question mark icon". APG vNext automatically uses the forum name as the alt text for forum images uploaded through the Admin Panel, which is correct in most cases.
Icon Sprite Optimisation for Forum Lists
For forums with many categories (20+), loading individual icon images creates many separate HTTP requests. Use an icon sprite — a single image containing all forum icons — to reduce this to one HTTP request:
/* Icon sprite approach for multiple forum icons: */
.apg-forum-icon {
background-image: url('/assets/images/forum-icons-sprite.webp');
background-repeat: no-repeat;
width: 48px; height: 48px;
}
/* Position each forum's icon within the sprite: */
[data-forum-id="1"] .apg-forum-icon { background-position: 0 0; }
[data-forum-id="2"] .apg-forum-icon { background-position: -48px 0; }
[data-forum-id="3"] .apg-forum-icon { background-position: -96px 0; }Generate the sprite using a tool like Sprite Cow or an npm package such as spritesmith. Each icon position should be documented in the sprite's accompanying CSS so future maintainers know which position corresponds to which forum.
Fallback for Missing Forum Icons
If a forum's custom icon image cannot be found (deleted file, broken URL), APG vNext automatically falls back to the default folder icon rather than displaying a broken image element. Configure a higher-quality custom fallback icon:
<add key="APG.Forum.DefaultIconUrl" value="/assets/images/forum-default.svg" />
<!-- This SVG scales perfectly and serves as fallback for all forums
that don't have a custom icon configured -->Dark Mode Compatibility for Forum Icons
Custom forum icons designed for light mode can look poor on dark-mode forums — a white PNG icon with a white background becomes invisible on a dark background. Design forum icons with transparent backgrounds and ensure the icon art itself is visible on both light and dark backgrounds. Icons with sufficient contrast on both backgrounds work well in both modes without needing separate dark mode versions. For icons that require distinct light and dark variants, use CSS media queries to switch icon URLs:
/* Light mode forum icon: */
.apg-forum-icon { background-image: url('/assets/icons/forum-support-light.svg'); }
/* Dark mode variant: */
@media (prefers-color-scheme: dark) {
.apg-forum-icon { background-image: url('/assets/icons/forum-support-dark.svg'); }
}
/* Or when using APG vNext's data-theme attribute: */
[data-theme="dark"] .apg-forum-icon {
background-image: url('/assets/icons/forum-support-dark.svg');
}Related Resources
Looking for more help? Browse the support forum or check the Knowledge Base.