Manual B: Image Example

This manual demonstrates how traditional images are rendered in page cards when not using Font Awesome icons.

1. Image Handling

When the page illustration doesn’t contain fa-, the system treats it as an image path:

:page-illustration: ROOT:A.png

This renders as:

<img alt="" src="path/to/image.png"/>

2. Image vs Font Awesome

The page-card partial automatically detects the content type:

Font Awesome Detection

Uses regexMatch "fa-" to detect Font Awesome classes

Image Fallback

Any non-FA content is treated as an image reference

Antora Resolution

Images are resolved using Antora’s resolveResourceURL helper

3. Best Practices

Font Awesome Icons

Use for consistent, scalable iconography across the documentation

Custom Images

Use for specific illustrations, logos, or complex graphics

Accessibility

Both approaches support proper alt text and semantic markup