This community thread discusses the feature or improvement: Font Awesome Icons.
Feature Details
Since we integrate Font Awesome 3 into the software, you can use the icons in posts by creating some PGDCodes:[+] -> [o] -> [->] -> [?] -> [!]...
How APG vNext Handles Feature Requests
Feature requests and suggestions are tracked through the community forum. The development team reviews popular requests and incorporates the most-requested improvements into upcoming releases.
- Vote for features by upvoting the original post in the forum thread
- Add details about your use case to help prioritize the request
- Check the release blog for updates on upcoming features
See the full feature set on the Features page or browse all community discussions.
Using Font Awesome Icons in APG vNext
APG vNext includes its own icon set by default, but many administrators prefer Font Awesome for its larger icon library and familiarity. Adding Font Awesome to APG vNext requires loading the icon font and updating skin templates to use Font Awesome class names instead of APG vNext's default icon elements.
Adding Font Awesome to APG vNext
<!-- Option 1: CDN (simple, but adds external dependency) -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
crossorigin="anonymous" />
<!-- Option 2: Self-hosted (recommended for privacy and reliability) -->
<link rel="stylesheet" href="/assets/css/font-awesome-6.min.css" />Replacing APG vNext Default Icons
/* In custom.css: replace APG icon elements with Font Awesome equivalents */
.apg-icon-reply::before { font-family: "Font Awesome 6 Free";
content: " 3e5"; font-weight: 900; }
.apg-icon-quote::before { content: " 10e"; }
.apg-icon-edit::before { content: " 044"; }
.apg-icon-delete::before { content: " 2ed"; }
.apg-icon-like::before { content: " 164"; }
.apg-icon-attachment::before{ content: " 0c6"; }Using Font Awesome in Skin Templates
<!-- Replace APG vNext icon elements in skin templates: -->
<!-- Old: <span class="apg-icon apg-icon-reply"></span> -->
<!-- New: -->
<i class="fa-solid fa-reply" aria-hidden="true"></i>
<span class="sr-only">Reply</span>Performance Considerations
Font Awesome's full CSS is 88KB. For production, use the subsetting tool at fontawesome.com/subset to generate a CSS file containing only the icons you actually use - typically reducing it to 8-15KB.
Font Awesome Integration in APG vNext Skins
APG vNext skins can include Font Awesome icon fonts for consistent iconography across the forum UI. The recommended approach is to load Font Awesome via the CDN with the integrity hash for subresource integrity protection:
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
integrity="sha512-..."
crossorigin="anonymous"
referrerpolicy="no-referrer" />Alternatively, self-host Font Awesome by copying the font files and CSS to the APG vNext skin folder and updating the font-face src paths. Self-hosting avoids the third-party CDN dependency and ensures icons load even when CDN services are unavailable, at the cost of a larger skin bundle size. For high-traffic production forums, self-hosting is recommended to eliminate CDN availability as a dependency for page rendering.
Using Font Awesome in APG vNext Templates
After Font Awesome is loaded, use icon classes in APG vNext skin templates and custom HTML in posts. For example, adding icons to the navigation menu:
<ul class="forum-nav">
<li><i class="fa-solid fa-house"></i> Home</li>
<li><i class="fa-solid fa-comments"></i> Forum</li>
<li><i class="fa-solid fa-user"></i> Members</li>
<li><i class="fa-solid fa-envelope"></i> Contact</li>
</ul>Be mindful of accessibility: decorative icons that duplicate text labels should have aria-hidden="true" to prevent screen readers from announcing the icon name alongside the text. Icons used without accompanying text (e.g., a standalone edit pencil icon) require an aria-label attribute to be accessible to screen reader users.
Replacing Icon Fonts with SVG Icons
Modern web development best practice favours SVG icons over icon fonts because SVG icons are sharper at all resolutions, can be styled with CSS independently (colour, size, stroke), don't require a separate font file HTTP request, and are fully accessible with ARIA attributes without special workarounds. For new APG vNext skin development, consider using an SVG icon system instead of Font Awesome. An SVG sprite approach inlines all icons as a hidden SVG element in the HTML head and references individual icons with <use>:
<!-- In HTML head: -->
<svg>
<symbol id="icon-home" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></symbol>
</svg>
<!-- Usage anywhere: -->
<svg class="icon" aria-label="Home"><use href="#icon-home"/></svg>The SVG sprite approach requires no additional HTTP requests and allows each icon to be individually styled and animated with CSS — capabilities that are cumbersome or impossible with icon fonts.
Icon Font Performance Considerations
Font Awesome 6 (FA6) loads the full icon library by default, which is a 30-50 KB CSS file plus 100+ KB of font files. For performance-critical forums, reduce the icon font payload by creating a custom Font Awesome package that includes only the specific icons used in the skin. The Font Awesome website provides a kit builder for this purpose, or you can use tools like fontello to generate a custom icon font containing only the needed icons. A typical APG vNext skin uses 15-30 distinct icons — a custom font for these specific icons is 5-10 KB rather than 100+ KB, a meaningful saving especially for mobile visitors on limited data plans.
Related Resources
Looking for more help? Browse the support forum or check the Knowledge Base.