Skip to content

feat: Add Label Wizard feature for creating custom labeled icons#20881

Open
Adarsh-code169 wants to merge 1 commit intoFortAwesome:7.xfrom
Adarsh-code169:feature/label-wizard
Open

feat: Add Label Wizard feature for creating custom labeled icons#20881
Adarsh-code169 wants to merge 1 commit intoFortAwesome:7.xfrom
Adarsh-code169:feature/label-wizard

Conversation

@Adarsh-code169
Copy link

This commit introduces the Label Wizard, an interactive tool that allows users to create custom labeled icons by combining Font Awesome icons with text labels.

Features:

  • Icon selection with search and filtering (solid, regular, brands)
  • Text customization (font family, size, weight, color)
  • Layout positioning (9 position options with spacing controls)
  • Real-time preview canvas
  • Multiple export formats:
    • SVG export with embedded fonts
    • PNG export with transparent background
    • React component code generation
    • Vue component code generation
    • HTML/CSS code snippets
  • Accessibility features with auto-generated alt-text and ARIA labels
  • Modern glassmorphism UI with dark mode
  • Fully responsive design (desktop, tablet, mobile)

Files added:

  • label-wizard.html: Main interactive tool
  • docs/label-wizard-usage.md: Comprehensive usage documentation
  • examples/label-wizard-examples.html: Real-world use case examples

This addresses the feature request for a streamlined way to generate, customize, and export labeled icons without switching between multiple tools.

Resolves: Feature request for Label Wizard
See: https://github.com/FortAwesome/Font-Awesome/issues

I understand that:

  • I'm submitting this PR for reference only. It shows an example of what I'd like to see changed but
    I understand that it will not be merged and I will not be listed as a contributor on this project.

This commit introduces the Label Wizard, an interactive tool that allows users to create custom labeled icons by combining Font Awesome icons with text labels.

Features:
- Icon selection with search and filtering (solid, regular, brands)
- Text customization (font family, size, weight, color)
- Layout positioning (9 position options with spacing controls)
- Real-time preview canvas
- Multiple export formats:
  * SVG export with embedded fonts
  * PNG export with transparent background
  * React component code generation
  * Vue component code generation
  * HTML/CSS code snippets
- Accessibility features with auto-generated alt-text and ARIA labels
- Modern glassmorphism UI with dark mode
- Fully responsive design (desktop, tablet, mobile)

Files added:
- label-wizard.html: Main interactive tool
- docs/label-wizard-usage.md: Comprehensive usage documentation
- examples/label-wizard-examples.html: Real-world use case examples

This addresses the feature request for a streamlined way to generate, customize, and export labeled icons without switching between multiple tools.

Resolves: Feature request for Label Wizard
See: https://github.com/FortAwesome/Font-Awesome/issues
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant