Social CSS Icons

Introduction

Social CSS Icons is a 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.

Installation

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: SocialCSSIcons_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the SocialCSSIcons_UNZIP.zip package. After unzipping, you will find the following contents:

• mod_social_css_icons_X.x.zip: This is the installation file compatible with Joomla 4.x, 5.x, and 6.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to System > Install > Extensions. You can either drag and drop or browse for the file to install.

A success message will be displayed once the installation is complete.

Note: This module supports Joomla 4, 5, and 6 only. Support for Joomla 3.x has been discontinued.

Module Settings

After installation, the module needs to be configured to suit your requirements. Access the module settings by navigating to Content > Site Modules, and find Social CSS Icons in the list.

Module Settings

• Social Icon Background Size: Select the size of the social icon background in pixels.
  • Default: 40 pixels
  • Enter any numeric value (e.g., 30, 40, 50)
• Social Icon Size: Select the size of the social icon itself in pixels.
  • Default: 22 pixels
  • This controls the FontAwesome icon size
• Style Type: Set the style type of the social icons.
  • Square: Clean, modern square icons with rounded corners
  • Round: Fully rounded circular icons
  • Drop: Unique drop-shaped icons with rounded top and pointed bottom
  • Default: Square
• Open Window: Option to open the links in same or different tab.
  • New Tab: Opens social links in a new browser tab
  • Same Window: Opens links in the current window
  • Default: Same Window
• Social Icons Alignment: You can align the icons to left, right or center.
  • Left: Align icons to the left side
  • Center: Center icons for balanced layout
  • Right: Align icons to the right side
  • Default: Left
• Zoom Icon on Hover: Option to enable or disable zoom effect on hover.
  • Enable: Icons scale to 120% on hover with smooth animation
  • Disable: No zoom effect on hover
  • Default: Disable

Slide Settings

In the slide settings, you can add, remove, and manage your social media icons. The module comes with 13 pre-configured popular social icons that you can customize or remove.

Managing Social Icons

• Add Icons: Click on the "Add" button to add new social icons
• Remove Icons: Click on the "Remove" button to delete unwanted icons
• Reorder Icons: Drag and drop icons to reorder them according to your requirement
• Move Icons: Use the move buttons to rearrange icon positions

Icon Configuration

For each social icon, you can configure:

• Icon: Enter the FontAwesome icon name (e.g., Facebook, Twitter, Instagram, LinkedIn, YouTube, etc.)
  • Use the exact FontAwesome brand icon name
  • Examples: Facebook, Twitter, Instagram, LinkedIn
• URL: Enter the complete URL of your social media profile or page
  • Must be a complete URL (e.g., https://www.facebook.com/yourpage)
  • For Skype, use format: skype:username?chat
  • Examples:
    • Facebook: https://www.facebook.com/yourpage
    • Twitter: https://www.twitter.com/yourhandle
    • Instagram: https://www.instagram.com/yourprofile
• Select the Color: Choose the background color for each icon
  • Use the color picker to select a custom color
  • Or use official brand colors (e.g., Facebook: #3B5998, Twitter: #1da1f2)
  • Each icon can have its own unique color

Pre-configured Icons

The module comes with 13 pre-configured social icons:

• Facebook, Twitter, LinkedIn, YouTube
• Pinterest, Vimeo-Square, Foursquare, Tumblr
• Skype, Dribbble, Instagram, Yelp, Google

You can modify, remove, or add more icons as needed.

Advanced

Advanced Settings

• Add Extra CSS: Option to add extra CSS and modify styling directly in the module parameters.
  • Use this field to add custom CSS for advanced styling
  • Target specific elements using module ID or classes
  • Examples:
    • Change icon spacing: #jx-social-cssicons-141 li { margin: 0 10px; }
    • Add custom hover effects: #jx-social-cssicons-141 li a:hover { opacity: 0.8; }
    • Override default colors: #jx-social-cssicons-141 .fa-facebook { background-color: #custom-color !important; }
  • Module ID: Each module instance has a unique ID (e.g., jx-social-css-141)
  • CSS Classes: Main classes include:
    • .jx-social-css-icons - Main wrapper
    • .jx-social-area - Icon list container
    • .jx-social-square, .jx-social-round, .jx-social-drop - Style classes
    • .jx-social-zoom - Zoom effect class

Tips for Custom CSS

• Always use the module ID in your selectors for specificity
• Use !important if you need to override default styles
• Test your CSS on different screen sizes for responsiveness
• Check browser console for any CSS errors

Features

Once configured, assign the module to a position on your Joomla template and publish it. The Social CSS Icons will display based on your settings, providing visitors with easy access to your social media profiles.

Features

• Multiple Icon Styles: Choose from Square, Round, or Drop styles to match your website design.
• Customizable Sizes: Control both icon background size and icon text size independently.
• Individual Colors: Set unique background colors for each social media icon.
• Zoom on Hover: Professional hover effect that scales icons on mouse over.
• Flexible Alignment: Align icons to left, center, or right as needed.
• FontAwesome Integration: Uses Joomla's native FontAwesome library for consistent icon rendering.
• Easy Management: Simple subform interface for adding, removing, and reordering icons.
• Window Target Control: Choose to open links in new tab or same window.
• Responsive Design: Fully responsive and mobile-friendly layout.
• Advanced Customization: Add custom CSS for further styling options.
• Joomla 4, 5 & 6 Compatible: Fully compatible with the latest Joomla versions.
• Security Features: Automatic rel="noopener noreferrer" on external links.
• Accessibility: Screen reader support with visually-hidden text.

FAQ

• How do I add a new social media icon?

  • Go to Slide Settings tab and click the "Add" button. Enter the FontAwesome icon name, URL, and select a color.

• Can I change the color of individual icons?

  • Yes, each icon has its own color picker in the Slide Settings tab. You can set unique colors for each social platform.

• How do I reorder the icons?

  • In the Slide Settings tab, you can drag and drop icons to reorder them, or use the move buttons.

• What FontAwesome icons are supported?

  • Any FontAwesome brand icon is supported. Common ones include: Facebook, Twitter, Instagram, LinkedIn, YouTube, Pinterest, and many more.

• How do I enable the zoom on hover effect?

  • In the Module Settings tab, set "Zoom Icon on Hover" to "Enable".

• Can I use custom CSS to style the icons?

  • Yes, use the "Add Extra CSS" field in the Advanced tab to add custom styling.

• How do I align the icons to the center?

  • In the Module Settings tab, set "Social Icons Alignment" to "Center".

• Why aren't my icons displaying?

  • Ensure the module is published and assigned to a visible template position. Check that you have added at least one icon in the Slide Settings. Verify that the URLs are complete and valid.

Troubleshooting

• Icons Not Displaying: Ensure the module is published and assigned to a visible template position. Check that you have added at least one icon in the Slide Settings tab. Verify that the icon names are correct FontAwesome brand icon names.
• Icons Not Aligned Correctly: Check the "Social Icons Alignment" setting in Module Settings. Clear browser cache and Joomla cache after making changes.
• Colors Not Applying: Verify that you have selected colors for each icon in the Slide Settings. Check for CSS conflicts with your template. Use browser developer tools to inspect the elements.
• Zoom Effect Not Working: Ensure "Zoom Icon on Hover" is set to "Enable" in Module Settings. Check that there are no CSS conflicts overriding the hover effect.
• Links Not Opening Correctly: Verify that URLs are complete and valid (must start with http:// or https://). Check the "Open Window" setting in Module Settings.
• Icons Too Small or Too Large: Adjust the "Social Icon Background Size" and "Social Icon Size" in Module Settings. Enter pixel values (e.g., 40 for background, 22 for icon).
• Custom CSS Not Working: Ensure you're using the correct module ID in your CSS selectors. Check browser console for CSS errors. Use !important if needed to override default styles.
• Icons Not Responsive: The module is responsive by default. If icons appear too large on mobile, adjust the icon sizes in Module Settings or add custom CSS with media queries.
• FontAwesome Icons Not Loading: The module uses Joomla's native FontAwesome. Ensure your Joomla installation has FontAwesome available. Check that no other extensions are conflicting with FontAwesome loading.