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 alfonsüs ardani
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
@alfonsüs ardani 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.
See which styles are getting applied or if there are any conflicting css rules
KawakawaOP
text-[#a46dfa] is not applied.
@alfonsüs ardani See which styles are getting applied or if there are any conflicting css rules
KawakawaOP
i cannot see text-[color] is applied.
@alfonsüs ardani 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
alfonsüs ardani
Where is your Header.tsx called?
@Kawakawa Click to see attachment
alfonsüs ardani
And what route is this?
alfonsüs ardani
What happen if you change "POINT" into "POINT2" in header.tsx?
Answer
@alfonsüs ardani 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