Next.js Discord

Discord Forum

Simple update on my Next.js frontend.

Answered
Kawakawa posted this in #help-forum
Open in Discord
KawakawaOP
Hello everyone.
This is header component.
I need change color of icons to purple.
But I cannot ->
Relevant code :
Answered by aardani
What happen if you change "POINT" into "POINT2" in header.tsx?
View full answer

21 Replies

KawakawaOP
Here is global layout.tsx :

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";

const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});

const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});

export const metadata: Metadata = {
title: "TOTO purple",
description: "ToTo Club - Sports Betting Platform",
};

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
</head>
<body
className={${geistSans.variable} ${geistMono.variable} bg-black text-light font-sans}
suppressHydrationWarning
>
{children}
</body>
</html>
);
}
{/* Header right menu - Desktop (md and above) */}
<nav className="hidden md:flex items-center md:text-[13px] ">

<Link href="#" className="mr-5 page-item" data-page="letter">
<i className="fa fa-envelope mr-1"></i>LETTER
</Link>
<Link href="#" className="mr-5 page-item" data-page="deposit">
<i className="fa fa-piggy-bank mr-1 text-[#a46dfa]"/>DEPOSIT
</Link>
<Link href="#" className="mr-5 page-item" data-page="withdraw">
<i className="fa fa-money-bill-wave mr-1 text-[#a46dfa]"></i>WITHDRAW
</Link>
<Link href="#" className="mr-5 page-item" data-page="point">
<i className="fa fa-coins mr-1 text-[#a46dfa]"></i>POINT
</Link>
<Link href="#" className="mr-5 page-item" data-page="notice">
<i className="fa fa-bullhorn mr-1 text-[#a46dfa]"></i>NOTICE
</Link>
<Link href="#" className="mr-5 page-item" data-page="event">
<i className="fa fa-gift mr-1 text-[#a46dfa]"></i>EVENT
</Link>
<Link href="#" className="mr-5 page-item" data-page="qna">
<i className="fa fa-question-circle mr-1 text-[#a46dfa]"></i>QNA
</Link>
can you inspect element on the icon?
i have suspicion that its an :after or :before element
KawakawaOP
font-awesome
@aardani can you inspect element on the icon?
KawakawaOP
please see screenshots and i imported font-awesome library in root layout.
KawakawaOP
color is not implemented. what do you mean inspect element? only white icon is appeared on the header.
@Kawakawa color is not implemented. what do you mean inspect element? only white icon is appeared on the header.
aardani
Right click on the icon on the browser -> inspect element
See which styles are getting applied or if there are any conflicting css rules
KawakawaOP
text-[#a46dfa] is not applied.
@aardani See which styles are getting applied or if there are any conflicting css rules
KawakawaOP
i cannot see text-[color] is applied.
@aardani Right click on the icon on the browser -> inspect element
KawakawaOP
Cursor is not solving this issue. So I posted this.
@Kawakawa Click to see attachment
aardani
Where is your Header.tsx called?
@Kawakawa Click to see attachment
aardani
And what route is this?
aardani
What happen if you change "POINT" into "POINT2" in header.tsx?
Answer
@aardani What happen if you change "POINT" into "POINT2" in header.tsx?
KawakawaOP
Thanks, man. Solved the issue. actually those Header component is not used in root page.tsx. thanks