Add TikTok and Instagram Icons Using React-Icons Due to FontAwesome Issue

[drakeRAGE]

This PR addresses an issue encountered when trying to use the TikTok icon in the contact section of a project. Despite other icons loading correctly with Font Awesome, the TikTok icon would not load. To resolve this, I have implemented the TikTok and Instagram icons using the react-icons library, which provides a similar design and ensures that all icons are displayed correctly.

Changes:

• Replaced the TikTok and Instagram icons with those from the react-icons library due to loading issues with Font Awesome.
• The design remains consistent with the other icons in the contact section.
• Added a round circle border around each icon with spacing to maintain the design aesthetic.

Issue Encountered:

While attempting to use the TikTok icon from Font Awesome, I noticed that it would not load, despite other icons (like Facebook and Twitter) loading correctly. This issue seems specific to the TikTok icon, and I am unsure why it is occurring as it doesn't appear to be a replicable problem in other environments.

Implementation:

• Used react-icons library to implement the TikTok and Instagram icons, ensuring compatibility and a consistent design across all icons.
• The TikTok icon now displays as expected, with no issues related to loading or styling.

Usage Example:

import { FiFacebook, FiTwitter, FiYoutube, FiTiktok } from "react-icons/fi";

// Usage within a Contact Section
function ContactSection() {
  return (
    <div className="contact-icons">
      <a href="https://www.tiktok.com" aria-label="TikTok">
        <FiTiktok />
      </a>
      <a href="https://www.instagram.com" aria-label="Instagram">
        <FiInstagram />
      </a>
    </div>
  );
}

Motivation:

Given that the TikTok icon did not load correctly with Font Awesome, it was essential to find an alternative that ensured consistency and reliability. The react-icons library offers a comprehensive set of icons, including TikTok and Instagram, which can be used seamlessly in place of Font Awesome without sacrificing design quality.

Related Issues:

• This PR is related to Font Awesome new Icons #86.
• The issue does not seem to have a specific replicable cause, but it prevents the TikTok icon from loading in Font Awesome.

Additional Notes:

• This PR introduces react-icons as a dependency to resolve the issue.
• The design and functionality remain unchanged, apart from the icon library used.

---

Screenshots

By submitting this PR, I am ensuring that users who encounter similar issues with Font Awesome can still implement TikTok and Instagram icons using react-icons. This solution provides a consistent and reliable approach to icon management in the contact section.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-landing-page-template	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 11, 2024 9:02am
react-landing-page-template-93ne	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 11, 2024 9:02am