Skip to content

Update Twitter logo to X across the website #551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prashantkumarniraj wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Update Twitter logo to X across the website #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a22c5a
Fix conflicting Tailwind CSS utility classes on About page
prashantkumarniraj Feb 1, 2026
b9868c9
Update Twitter icon to X logo
prashantkumarniraj Feb 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from 'next/link'
import { Container } from '@/components/Container'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { faDiscord, faGithub, faGitlab, faTwitter } from '@fortawesome/free-brands-svg-icons'
import { faDiscord, faGithub, faGitlab, faXTwitter } from '@fortawesome/free-brands-svg-icons'
Copy link

@coderabbitai coderabbitai bot Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

@fortawesome/free-brands-svg-icons faXTwitter version history when added

💡 Result:

faXTwitter (the “X / Twitter” brand icon) was added to Font Awesome / @fortawesome/free-brands-svg-icons in v6.4.2. Evidence: the Font Awesome repo tracked the “X (New Twitter branding)” request under milestone 6.4.2 [1], and the @fortawesome/free-brands-svg-icons@6.4.2 package contains faXTwitter typings (faXTwitter.d.ts) [2]. Stack Overflow users also note it works starting in 6.4.2 (and not in 6.4.0) [3].

So, you need: @fortawesome/free-brands-svg-icons >= 6.4.2.

Sources: [1] FortAwesome/Font-Awesome#19827, [2] https://app.unpkg.com/%40fortawesome/free-brands-svg-icons%406.4.2/files/faXTwitter.d.ts, [3] https://stackoverflow.com/questions/77140202/twitter-x-using-font-awesome-6-not-working

Upgrade @fortawesome/free-brands-svg-icons to v6.4.2 or later.

The faXTwitter icon was added in v6.4.2. The current pinned version 6.2.1 does not export this icon, causing the build to fail. Upgrade the package dependency to resolve.

🤖 Prompt for AI Agents 
In `@src/components/Footer.jsx` at line 6, The import of faXTwitter in Footer.jsx
fails because the project pins `@fortawesome/free-brands-svg-icons` < v6.4.2;
update the dependency to v6.4.2 or later in your package manifest (e.g.,
package.json) and run install so the module exports faXTwitter, then verify the
import line "import { faDiscord, faGithub, faGitlab, faXTwitter } from
'@fortawesome/free-brands-svg-icons'" resolves and the build succeeds.


function NavLink({ href, children }) {
return (
Expand Down Expand Up @@ -46,7 +46,7 @@ export function Footer() {
<FontAwesomeIcon icon={faDiscord} size='xl' />
</Link>
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />
<FontAwesomeIcon icon={faXTwitter} size="xl" />
Comment on lines 48 to +49
Copy link

@coderabbitai coderabbitai bot Feb 2, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Update the aria-label to match X branding.

Screen readers will still announce “Twitter”. Consider “Follow on X” (or “Follow on X (Twitter)”).

🔧 Suggested fix 
-                <Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
+                <Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
                   <FontAwesomeIcon icon={faXTwitter} size="xl" />
                 </Link>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Link aria-label="Follow on Twitter" className=' text-zinc-400 hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faTwitter} size='xl' />
<FontAwesomeIcon icon={faXTwitter} size="xl" />
<Link aria-label="Follow on X" className=' text-zinc-400 hover:text-[`#00843D`] dark:text-zinc-400 dark:hover:text-yellow-400 transition' href='https://twitter.com/aossie_org'>
<FontAwesomeIcon icon={faXTwitter} size="xl" />
🤖 Prompt for AI Agents 
In `@src/components/Footer.jsx` around lines 48 - 49, The aria-label for the
social link currently reads "Follow on Twitter" and should be updated to reflect
X branding; in the Footer component update the Link with aria-label (used in the
JSX around FontAwesomeIcon and className) to "Follow on X" or "Follow on X
(Twitter)" so screen readers announce the correct service name.

</Link>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/about.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ export default function About() {
</Head>

<section style={styles.section}>
<h1 style={{ marginBottom: '20px' }} className="font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl md:text-5xl lg:text-6xl">
<h1 style={{ marginBottom: '20px' }} className="font-mono text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 md:text-5xl lg:text-6xl">
ABOUT
</h1>
<p className="text-zinc-600 dark:text-zinc-400 text-lg font-mono leading-7">
Expand Down Expand Up @@ -179,7 +179,7 @@ export default function About() {
}}
>
<div className='m-3 w-[60px] h-[60px] bg-cover bg-[url("/contribution.png")] dark:bg-[url("/contribution-dark.png")]'></div>
<h1 className="font-mono text-2xl md:text-6xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl md:text-5xl lg:text-6xl">
<h1 className="font-mono text-2xl font-extrabold tracking-tighter text-[#32a852] dark:text-yellow-400 sm:text-6xl lg:text-6xl">
GSOC CONTRIBUTION
</h1>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
faDiscord,
faGithub,
faGitlab,
faTwitter,
faXTwitter,
} from '@fortawesome/free-brands-svg-icons'
import { CardEffect } from '@/components/CardEffect'
import { Banner } from '@/components/Banner'
Expand Down Expand Up @@ -92,7 +92,7 @@ export default function Home() {
className="text-zinc-500 transition hover:text-[#00843D] dark:text-zinc-400 dark:hover:text-yellow-400"
href="https://twitter.com/aossie_org"
>
<FontAwesomeIcon icon={faTwitter} size="2xl" />
<FontAwesomeIcon icon={faXTwitter} size="2xl" />
</Link>
</div>
<div className="mt-12 mx-4 md:mx-0 md:mt-8 text-left ">
Expand Down