#Simple update on my Next.js frontend.

1 messages · Page 1 of 1 (latest)

torn rose
#

Hello everyone.
This is header component.
I need change color of icons to purple.
But I cannot ->
Relevant code :

image.png image.png image.png
fringe saddleBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

torn rose
#

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>
);
}

dense quarryBOT
# torn rose Hello everyone. This is header component. I need change color of icons to purple...
Please add more information to your question

Your question currently does not have sufficient information for people to be able to help. Please add more information to help us help you, for example: relevant code snippets, a reproduction repository, and/or more detailed error messages. See more info on how to ask a good question in https://discord.com/channels/752553802359505017/1138338531983491154 and #welcome message.

Requested by B33fb0n3
torn rose
#

{/* 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>
vagrant meteor
#

can you inspect element on the icon?

#

i have suspicion that its an :after or :before element

torn rose
#

font-awesome

torn rose
vagrant meteor
torn rose
#

color is not implemented. what do you mean inspect element? only white icon is appeared on the header.

image.png
vagrant meteor
#

See which styles are getting applied or if there are any conflicting css rules

torn rose
#

text-[#a46dfa] is not applied.

torn rose
torn rose
vagrant meteor
vagrant meteor
#

What happen if you change "POINT" into "POINT2" in header.tsx?

torn rose
vagrant meteor