mirror of
https://github.com/acedanger/finance.git
synced 2025-12-05 22:50:12 -08:00
69 lines
2.3 KiB
Markdown
69 lines
2.3 KiB
Markdown
# 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)
|