Next.js에서 탭 아이콘 및 title은 아래와 같이 설정해줄 수 있다!
export default function App({ Component, pageProps }: AppProps) {
return (
<Head>
<title>jw_portfolio</title>
<link rel="icon" type="image/x-icon" href="img/portfolio/icon.PNG" />
</Head>
<Component {...pageProps} />
);
}그런데 이렇게 link로 탭 아이콘을 설정해주면 Fontawsome 아이콘들이 깨진다!
(아이콘이 비정상적으로 커짐...)
이때 Fontawsome에 props로 size를 주거나 부모에 font size를 줘도 변화가 없다..
인터넷에서 에러의 해결방법을 찾았다.
다음과 같이 fontawsome css를 app 파일에 추가하면 해결이 된다.
import "@fortawesome/fontawesome-svg-core/styles.css";
해결!!
프론트엔드 주니어 개발자 한정우입니다. 😁