feat: add Font Awesome integration and usage guide to documentation

docs/icon-usage.md

@@ -0,0 +1,68 @@
+# Icon Usage Guide
+
+## Font Awesome Integration
+
+This project uses [Font Awesome](https://fontawesome.com/) (version 6) for icons instead of custom SVGs. This approach provides several benefits:
+
+### Benefits
+
+- **Maintainability**: Icons can be changed easily by modifying class names
+- **Consistency**: Ensures consistent icon styling throughout the application
+- **Performance**: Optimized icon loading and rendering
+- **Extensibility**: Easy to add new icons without creating custom SVGs
+- **Accessibility**: Proper accessibility support built-in
+
+### Installation
+
+The project uses Font Awesome via npm:
+
+```bash
+npm install @fortawesome/fontawesome-free --save
+```
+
+The Font Awesome styles are imported in the main layout file (`src/layouts/BaseLayout.astro`).
+
+### Usage
+
+Icons are implemented using the following pattern:
+
+```html
+<i class="fa-solid fa-icon-name" aria-hidden="true"></i>
+```
+
+Where:
+- `fa-solid` is the icon style (solid, regular, light, etc.)
+- `fa-icon-name` is the specific icon name
+- `aria-hidden="true"` prevents screen readers from announcing the icon when there is accompanying text
+
+For standalone icons that need to be accessible, use:
+
+```html
+<i class="fa-solid fa-icon-name" aria-label="Description of what the icon represents"></i>
+```
+
+### Icon Style Guide
+
+To maintain consistency across the application, use these icon styles for common actions:
+
+| Action | Icon | Class |
+|--------|------|-------|
+| Edit | Pen to Square | `fa-solid fa-pen-to-square` |
+| Delete | Trash Can | `fa-solid fa-trash-can` |
+| Add | Circle Plus | `fa-solid fa-circle-plus` |
+| Settings | Gear | `fa-solid fa-gear` |
+| User | User | `fa-solid fa-user` |
+| Search | Magnifying Glass | `fa-solid fa-magnifying-glass` |
+| Sort | Arrow Up-Down | `fa-solid fa-arrow-up-down` |
+| Filter | Filter | `fa-solid fa-filter` |
+| Close | X Mark | `fa-solid fa-xmark` |
+| Success | Circle Check | `fa-solid fa-circle-check` |
+| Error | Circle Exclamation | `fa-solid fa-circle-exclamation` |
+| Warning | Triangle Exclamation | `fa-solid fa-triangle-exclamation` |
+| Info | Circle Info | `fa-solid fa-circle-info` |
+
+### References
+
+- [Font Awesome Documentation](https://fontawesome.com/docs)
+- [Icon Search](https://fontawesome.com/icons)
+- [Accessibility with Font Awesome](https://fontawesome.com/docs/web/accessibility)