Introduction
Social CSS Icons is a versatile and easy-to-use Joomla module that displays beautiful social media icons on your website. Perfect for showcasing your social media presence, this module allows you to add customizable social icons with individual colors, styles, and hover effects. Fully compatible with Joomla 4, 5, and 6.
Key Features
Multiple Icon Styles
Choose from three distinct icon styles to match your website's design:
- Square: Clean, modern square icons with rounded corners
- Round: Fully rounded circular icons for a softer look
- Drop: Unique drop-shaped icons with rounded top and pointed bottom
Customizable Icon Sizes
Full control over icon dimensions:
- Icon Background Size: Adjust the overall size of each icon (default: 40px)
- Icon Text Size: Control the size of the FontAwesome icon itself (default: 22px)
- Flexible Sizing: Set any pixel value to match your design requirements
Individual Icon Colors
Customize each social media icon with its own color:
- Per-Icon Color Picker: Set unique background colors for each icon
- Brand Colors: Use official brand colors for each social platform
- Custom Colors: Match your website's color scheme perfectly
- Easy Management: Color picker interface for quick selection
Zoom on Hover Effect
Engage visitors with interactive hover effects:
- Enable/Disable Option: Toggle zoom effect on or off
- Smooth Animation: Professional 0.3s transition for smooth scaling
- Scale Effect: Icons scale to 120% on hover for better interactivity
- Performance Optimized: CSS-based animation for smooth performance
Flexible Alignment
Position your social icons exactly where you want:
- Left Alignment: Align icons to the left side
- Center Alignment: Center icons for balanced layout
- Right Alignment: Align icons to the right side
- Responsive: Maintains alignment across all screen sizes
FontAwesome Integration
Uses Joomla's built-in FontAwesome library:
- No External Dependencies: Uses Joomla's native FontAwesome
- Wide Icon Support: Access to all FontAwesome brand icons
- Consistent Styling: Professional icon rendering
- Lightweight: No additional CSS or JavaScript required
Supported Social Platforms
Pre-configured support for popular social media platforms:
- Facebook, Twitter, LinkedIn, YouTube
- Pinterest, Vimeo, Foursquare, Tumblr
- Skype, Dribbble, Instagram, Yelp, Google
- Unlimited Icons: Add any FontAwesome brand icon you need
Easy Content Management
Simple subform interface for managing icons:
- Add/Remove Icons: Easily add or remove social icons
- Drag & Drop: Reorder icons by simply dragging them
- Quick Configuration: Set icon name, URL, and color in one place
- Default Presets: Comes with 13 pre-configured popular social icons
Window Target Control
Control how links open:
- New Tab: Open social links in a new browser tab
- Same Window: Open links in the current window
- Security: Automatically adds rel="noopener noreferrer" for security
Advanced Customization
Additional options for power users:
- Extra CSS Field: Add custom CSS for advanced styling
- Module Class Suffix: Add custom CSS classes for specific targeting
- Full Control: Override any default styling with custom CSS
Responsive Design
Fully responsive and mobile-friendly:
- Mobile Optimized: Icons adapt to smaller screens
- Touch-Friendly: Appropriate spacing for touch interactions
- Cross-Device Compatibility: Works perfectly on all devices
- Flexible Layout: Icons wrap naturally on smaller screens
Modern Joomla Compatibility
Built for the latest Joomla versions:
- Joomla 4, 5 & 6 Support: Fully compatible with modern Joomla
- Modern PHP 8.0+: Updated codebase with modern PHP syntax
- WebAssetManager: Uses Joomla's native asset management
- Future-Proof: Built with latest web standards
Enhanced Security
Built with security best practices:
- Input Sanitization: All URLs and text properly sanitized
- XSS Prevention: Comprehensive output escaping
- Secure Links: Automatic rel="noopener noreferrer" on external links
- Type Validation: Proper validation for all input values
Accessibility Features
Designed with accessibility in mind:
- Screen Reader Support: Visually-hidden text for screen readers
- ARIA Labels: Proper aria-hidden attributes on decorative icons
- Keyboard Navigation: Full keyboard accessibility
- Semantic HTML: Proper use of semantic HTML elements
Use Cases
- Business Websites: Display social media links in header, footer, or sidebar
- Blog Sites: Show social sharing options for blog posts
- E-commerce: Link to social media profiles and product sharing
- Portfolio Sites: Showcase social media presence for artists and designers
- Corporate Sites: Professional social media integration
- Non-Profit Organizations: Connect with supporters on social platforms
- Personal Websites: Display personal social media profiles
- News Sites: Social media integration for article sharing
Technical Details
Requirements
- Joomla Version: 4.x, 5.x, or 6.x (Joomla 3.x support discontinued)
- PHP Version: 8.0 or higher
- Module Type: Site Module
- License: GNU/GPL v2 or later
- Update Server: Automatic updates supported via Joomla Update Manager
Installation
- Install the module through Joomla's Extension Manager
- Navigate to Modules → Social CSS Icons
- Configure Module Settings (sizes, style, alignment, zoom)
- Add social icons using the subform interface
- Set individual colors for each icon
- Assign the module to a module position
- Publish and display your social icons!
Customization Options
Module Settings
- Icon background size (in pixels)
- Icon text size (in pixels)
- Style type (Square, Round, Drop)
- Window target (New Tab or Same Window)
- Alignment (Left, Center, Right)
- Zoom on hover (Enable/Disable)
Slide Settings
- Icon name (FontAwesome icon name)
- URL (Social media profile or page URL)
- Color (Individual color picker for each icon)
Advanced Settings
- Extra CSS for additional customization
Why Choose Social CSS Icons Module?
- Easy to Use: Simple subform interface for adding and managing icons
- Fully Customizable: Control sizes, colors, styles, and alignment
- Multiple Styles: Three distinct icon styles to choose from
- Individual Colors: Set unique colors for each social platform
- Interactive Effects: Professional zoom on hover effect
- FontAwesome Integration: Uses Joomla's native FontAwesome library
- Responsive Design: Works perfectly on all devices
- Joomla 6 Ready: Fully compatible with latest Joomla versions
- Well Optimized: Lightweight code with efficient asset loading
- Regular Updates: Continuously updated for compatibility and security
Getting Started
- Install the module through Joomla's Extension Manager
- Navigate to Content → Site Modules → Social CSS Icons
- Configure Module Settings to set sizes, style, and alignment
- Use the subform to add your social media icons
- Set individual colors for each icon (or use brand colors)
- Enable zoom on hover if desired
- Assign to a module position and publish
- Your social icons are now live!
Perfect for any Joomla website that wants to display social media links with professional, customizable icons. Whether you need a simple social bar in the footer or prominent social icons in the header, this module provides the flexibility and ease of use you need.
Support
For support, documentation, and updates, please visit:
- Support: https://support.joomlax.com
- Store: https://joomlax.com
- Documentation:https://joomlax.com/documentation/social-css-icons
Social CSS Icons
- Version:
- 1.7
- Developer:
- Infyways Solutions
- Last updated:
-
Nov 25 2025
2 hours ago - Date added:
- Nov 19 2014
- License:
- GPLv2 or later
- Type:
- Paid download
- Includes:
- m
- Compatibility:
- J4 J5 J6
Share