                        

                        <div class="page-header">
                            <div>
                                <h1>Font Awesome</h1>
                                <p class="subtitle">Font Awesome 7 &mdash; the full bundled icon set.</p>
                            </div>
                        </div>

                        
                        <!-- SOLID ICONS SECTION -->
                        <div class="row m-t-25">
                            <div class="col-lg-12">
                                <div class="au-card">
                                    <div class="au-card-inner">
                                        <h3 class="title-2 m-b-40">Solid Icons (fas)</h3>
                                        <div class="row g-3">
                                            <!-- Home & Navigation -->
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-home fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-home</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-dashboard fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-dashboard</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-search fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-search</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-user fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-user</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-users fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-users</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-cog fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-cog</small>
                                                </div>
                                            </div>
                                            
                                            <!-- Business & Analytics -->
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-chart-bar fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-chart-bar</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-chart-line fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-chart-line</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-chart-pie fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-chart-pie</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-dollar-sign fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-dollar-sign</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-briefcase fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-briefcase</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-calculator fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-calculator</small>
                                                </div>
                                            </div>
                                            
                                            <!-- Communication -->
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-envelope fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-envelope</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-phone fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-phone</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-comments fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-comments</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-bell fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-bell</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-inbox fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-inbox</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-paper-plane fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-paper-plane</small>
                                                </div>
                                            </div>
                                            
                                            <!-- Files & Documents -->
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-file fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-file</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-folder fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-folder</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-download fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-download</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-upload fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-upload</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-print fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-print</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fa-solid fa-save fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fa-solid fa-save</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- REGULAR ICONS SECTION -->
                        <div class="row m-t-25">
                            <div class="col-lg-12">
                                <div class="au-card">
                                    <div class="au-card-inner">
                                        <h3 class="title-2 m-b-40">Regular Icons (far)</h3>
                                        <div class="row g-3">
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-heart fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-heart</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-star fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-star</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-bookmark fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-bookmark</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-thumbs-up fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-thumbs-up</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-clock fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-clock</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-calendar fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-calendar</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-envelope fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-envelope</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-file fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-file</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-folder fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-folder</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-circle fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-circle</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-square fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-square</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="far fa-eye fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">far fa-eye</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- BRAND ICONS SECTION -->
                        <div class="row m-t-25">
                            <div class="col-lg-12">
                                <div class="au-card">
                                    <div class="au-card-inner">
                                        <h3 class="title-2 m-b-40">Brand Icons (fab)</h3>
                                        <div class="row g-3">
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-facebook fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fab fa-facebook</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-twitter fs-2 text-info mb-2"></i>
                                                    <small class="text-muted">fab fa-twitter</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-google fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">fab fa-google</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-github fs-2 text-dark mb-2"></i>
                                                    <small class="text-muted">fab fa-github</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-linkedin fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fab fa-linkedin</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-instagram fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">fab fa-instagram</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-youtube fs-2 text-danger mb-2"></i>
                                                    <small class="text-muted">fab fa-youtube</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-apple fs-2 text-dark mb-2"></i>
                                                    <small class="text-muted">fab fa-apple</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-microsoft fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fab fa-microsoft</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-amazon fs-2 text-warning mb-2"></i>
                                                    <small class="text-muted">fab fa-amazon</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-slack fs-2 text-success mb-2"></i>
                                                    <small class="text-muted">fab fa-slack</small>
                                                </div>
                                            </div>
                                            <div class="col-lg-2 col-md-3 col-sm-4 col-6">
                                                <div class="icon-showcase d-flex flex-column align-items-center p-3 border rounded text-center">
                                                    <i class="fab fa-discord fs-2 text-primary mb-2"></i>
                                                    <small class="text-muted">fab fa-discord</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- ICON USAGE GUIDE -->
                        <div class="row m-t-25">
                            <div class="col-lg-6">
                                <div class="au-card">
                                    <div class="au-card-inner">
                                        <h3 class="title-2 m-b-30">Usage Examples</h3>
                                        <div class="alert alert-info">
                                            <h6><i class="fa-solid fa-info-circle me-2"></i>Font Awesome 6 Syntax</h6>
                                            <p class="mb-2"><strong>Solid Icons:</strong> <code>&lt;i class="fa-solid fa-home"&gt;&lt;/i&gt;</code></p>
                                            <p class="mb-2"><strong>Regular Icons:</strong> <code>&lt;i class="far fa-heart"&gt;&lt;/i&gt;</code></p>
                                            <p class="mb-0"><strong>Brand Icons:</strong> <code>&lt;i class="fab fa-facebook"&gt;&lt;/i&gt;</code></p>
                                        </div>
                                        <div class="alert alert-success">
                                            <h6><i class="fa-solid fa-check-circle me-2"></i>Sizing Classes</h6>
                                            <div class="d-flex align-items-center gap-3 mb-2">
                                                <i class="fa-solid fa-star"></i> <span>Default</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3 mb-2">
                                                <i class="fa-solid fa-star fa-lg"></i> <span>fa-lg (33% larger)</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3 mb-2">
                                                <i class="fa-solid fa-star fa-2x"></i> <span>fa-2x (2em)</span>
                                            </div>
                                            <div class="d-flex align-items-center gap-3">
                                                <i class="fa-solid fa-star fa-3x"></i> <span>fa-3x (3em)</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="au-card">
                                    <div class="au-card-inner">
                                        <h3 class="title-2 m-b-30">Icon Categories</h3>
                                        <div class="row">
                                            <div class="col-6 mb-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-color bg-primary rounded me-2" style="width: 16px; height: 16px;"></div>
                                                    <span class="fs-6">Navigation</span>
                                                </div>
                                            </div>
                                            <div class="col-6 mb-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-color bg-success rounded me-2" style="width: 16px; height: 16px;"></div>
                                                    <span class="fs-6">Business</span>
                                                </div>
                                            </div>
                                            <div class="col-6 mb-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-color bg-info rounded me-2" style="width: 16px; height: 16px;"></div>
                                                    <span class="fs-6">Communication</span>
                                                </div>
                                            </div>
                                            <div class="col-6 mb-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-color bg-warning rounded me-2" style="width: 16px; height: 16px;"></div>
                                                    <span class="fs-6">Files</span>
                                                </div>
                                            </div>
                                            <div class="col-6 mb-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-color bg-danger rounded me-2" style="width: 16px; height: 16px;"></div>
                                                    <span class="fs-6">Regular</span>
                                                </div>
                                            </div>
                                            <div class="col-6 mb-3">
                                                <div class="d-flex align-items-center">
                                                    <div class="icon-color bg-secondary rounded me-2" style="width: 16px; height: 16px;"></div>
                                                    <span class="fs-6">Brands</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-3">
                                            <p class="text-muted small">
                                                <i class="fa-solid fa-lightbulb me-1"></i>
                                                Click any icon above to copy its HTML code to clipboard
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- COPYRIGHT ROW -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="copyright">
                                    <p>Copyright © 2026 Colorlib. All rights reserved. Template by <a href="https://colorlib.com" rel="nofollow" target="_blank">Colorlib</a>.</p>
                                </div>
                            </div>
                        </div>

