Footer Social Icons

[lupyana]

Description

Replace the current social media icons in the footer with Font Awesome icons, using either a CDN link or by downloading the Font Awesome library directly. Implement a custom hover effect where icons turn white with an orange background.

Current State

The footer contains custom icons for Instagram, Twitter (X), LinkedIn, and Facebook.

Tasks

• [x] Decide on implementation method:
  • Option A: Use Font Awesome CDN
  • Option B: Download Font Awesome library and host it locally
• [x] Implement chosen method (see implementation steps below)
• [x] Replace current icon images with Font Awesome icons:
  • Instagram: fa-instagram
  • Twitter (X): fa-x-twitter
  • LinkedIn: fa-linkedin-in
  • Facebook: fa-facebook-f
• [x] Style icons appropriately (size, color, alignment)
• [x] Implement custom hover effect: white icon with orange background
• [x] Ensure icons are accessible (proper aria labels)

Common Steps (after choosing A or B)

1. Replace the current icon HTML with Font Awesome classes:

   <div class="footer-social-icons">
    <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
    <a href="#" aria-label="Twitter"><i class="fab fa-x-twitter"></i></a>
    <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
   </div>

2. Add CSS for styling and the new hover effect:

   .footer-social-icons a {
    display: inline-block;
    color: #ff9900; /* Default icon color - adjust as needed */
    font-size: 24px; /* Adjust size as needed */
    margin: 0 10px; /* Adjust spacing as needed */
    width: 40px; /* Adjust for desired icon container size */
    height: 40px; /* Adjust for desired icon container size */
    line-height: 40px; /* Center icon vertically */
    text-align: center; /* Center icon horizontally */
    border-radius: 50%; /* Create circular background on hover */
    transition: all 0.3s ease;
   }
   
   .footer-social-icons a:hover {
    color: #ffffff; /* White icon on hover */
    background-color: #ff9900; /* Orange background on hover - adjust color as needed */
   }

Acceptance Criteria

• Font Awesome icons are correctly displayed in the footer
• Icons have the default styling (orange color, appropriate size) when not hovered
• On hover, icons turn white with an orange circular background
• The hover effect is smooth and visually appealing
• Icons are accessible to screen readers
• The implementation is responsive and looks good on all device sizes

•