Download the PHP package visual1/statamic-font-awesome-fieldtype without Composer
On this page you can find all versions of the php package visual1/statamic-font-awesome-fieldtype. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package statamic-font-awesome-fieldtype
Font Awesome Fieldtype for Statamic
A Font Awesome fieldtype for Statamic that provides a searchable icon interface with visual color and size controls. Supports both Font Awesome Free and Pro with automatic fallback.
✨ Features
🔍 Smart Search & Performance
- Search-based lazy loading - Only loads icons when you search (3+ characters)
- Instant popular icons - 25 most common icons load immediately (0ms)
- Intelligent caching - Dual-layer caching system for optimal performance
- Real-time filtering - Style-based filtering with live icon validation
🎨 Rich User Experience
- Live icon preview - See icons as you search with customizable color picker
- Multiple icon sizes - Preview icons in normal, large, extra-large, and huge sizes
- Copy to clipboard - One-click copy for CSS classes, HTML, Antlers tags, and direct usage
- Dark mode support - Beautiful interface that adapts to your CP theme
- Responsive design - Works perfectly on desktop, tablet, and mobile
🔐 Pro & Free Support
- Font Awesome Pro API - Full GraphQL integration with token authentication
- Font Awesome Free - Complete free icon set via GitHub API
- Kit CSS loading - Automatic Pro Kit CSS/JS loading for authenticated users
- Style validation - Real-time checking of icon availability per style
- Graceful fallbacks - Seamless fallback from Pro to Free when needed
⚡ Developer Experience
- Zero configuration - Works out of the box with sensible defaults
- Flexible configuration - Extensive fieldtype options for customization
- Statamic integration - Full support for blueprints, fieldsets, and replicators
- Antlers tags - Simple template tags for rendering icons
- Data augmentation - Rich icon data available in templates
📦 Installation
Via Composer from GitHub
Add this repository to your composer.json:
Then run:
Manual Installation
- Clone or download from GitHub
- Extract to
packages/visual1/font-awesome-fieldtype/ -
Add to your main
composer.jsonautoload section: - Run
composer dump-autoload
⚙️ Configuration
Basic Setup
The fieldtype works immediately after installation with Font Awesome Free. No configuration required!
Pro Setup (Optional)
For Font Awesome Pro features, add your credentials to .env:
Get your credentials from:
- API Token: Font Awesome Account
- Kit ID: Font Awesome Kits
Publish Configuration (Optional)
This creates config/fontawesome.php for advanced customization.
🎯 Usage
1. Add to Blueprint
2. Fieldtype Configuration
| Option | Type | Default | Description |
|---|---|---|---|
icon_styles |
Array | ['solid'] |
Icon styles to include (solid, regular, light, thin, duotone, brands) |
show_preview |
Boolean | true |
Enable live icon preview in dropdown and preview area |
hide_unavailable |
Boolean | true |
Hide icons not available in current Font Awesome setup |
placeholder |
String | 'Search Font Awesome icons...' |
Custom placeholder text for search field |
3. Add Font Awesome to Your Layout
Add this line to your layout file (resources/views/layout.antlers.html) in the <head> section:
Complete example:
4. Template Usage
Recommended Icon Rendering
Use this recommended syntax that handles both simple icons and icons with color/size settings:
Important: Replace my_icon with your actual field name. For example, if your field is called header_icon, use:
This conditional approach:
- ✅ Handles color/size data without errors
- ✅ Falls back gracefully for simple string values
- ✅ Prevents "Array to string conversion" errors
- ✅ Future-proof against data format changes
Note: The fieldtype preview will automatically show this syntax with your actual field name. Simply copy and paste it for error-free usage.
Simple Usage (Use with Caution)
For simple string-only icons (no color/size):
⚠️ Warning: This simple syntax will cause errors if the field contains color/size data. Always prefer the bulletproof conditional syntax above.
Advanced Usage
Direct HTML Usage
📊 Available Icon Styles
| Style | Class | Availability | Description |
|---|---|---|---|
| Solid | fas |
Free & Pro | Bold, filled icons |
| Regular | far |
Free & Pro | Outlined icons |
| Light | fal |
Pro Only | Lighter weight icons |
| Thin | fat |
Pro Only | Thinnest weight icons |
| Duotone | fad |
Pro Only | Two-color icons |
| Brands | fab |
Free & Pro | Brand and logo icons |
🔧 API Integration
Font Awesome Pro API
The addon uses the official Font Awesome Pro GraphQL API for authenticated users:
Font Awesome Free API
For free users, icons are loaded from the GitHub metadata:
🚀 Performance Features
Search-Based Lazy Loading
Instead of loading 3,800+ icons upfront, the fieldtype uses intelligent lazy loading:
- Popular icons load instantly (0ms)
- Search results load only when needed (3+ characters)
- API calls are cached for 30 minutes
- Search queries are cached for 10 minutes
Caching Strategy
- Popular Icons Cache - 25 most common icons always available
- Full Icon Cache - Complete icon set cached for 30 minutes
- Search Cache - Individual search queries cached for 10 minutes
- Status Cache - Icon availability status cached for session
- Style Support Cache - CSS style detection cached for session
Performance Benefits
- 90% faster initial load time
- 95% less memory usage until search
- Zero API calls for popular icons
- Minimal bandwidth usage with intelligent caching
🎨 Customization
CSS Customization
The fieldtype uses Tailwind CSS classes and provides CSS custom properties for theming:
Dark Mode
Dark mode is automatically supported and follows your Control Panel theme:
🔍 Troubleshooting
Common Issues
Icons Not Loading
Problem: Icons don't appear in search results Solution:
- Check your API token in
.env - Verify network connectivity
- Clear the addon cache with the refresh button
Pro Icons Showing as Unavailable
Problem: Pro icons show as "PRO" or unavailable Solutions:
- Add
FONTAWESOME_API_TOKENto your.envfile - Verify your Pro subscription is active
- Check that your API token has correct permissions
Icons Not Rendering on Frontend
Problem: Icons show as squares or don't appear Solutions:
- Ensure Font Awesome CSS is loaded on your frontend
- For Pro users, add your Kit ID to
.env - Verify CSS classes are correct in templates
Cache Issues
To clear all caches, use the refresh button in the fieldtype interface or manually clear:
🔧 Advanced Configuration
Custom Icon Sets
While this addon focuses on Font Awesome, you can extend it for custom icon sets:
Performance Tuning
For high-traffic sites, consider these optimizations:
📚 API Reference
Fieldtype Methods
Antlers Tags
JavaScript Events
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
Development Setup
Testing
📄 License
This addon is proprietary software. See LICENSE for details.
🆘 Support
- Issues: GitHub Issues
- Email: [email protected]
🎉 Credits
Created with ❤️ by Visual1
- Font Awesome - fontawesome.com
- Statamic - statamic.com
- Vue.js - vuejs.org
