React에서 Font Awesome 사용하기

React 를 사용하면 <i> 태그나 <svg>태그로 Font Awesome 자료를 사용할 수 없음(렌더링 안됨)

 

사용하려면 패키지부터 설치해야함

 

 

기본 패키지 설치

npm i @fortawesome/fontawesome-svg-core

 

 

일단 무료인 패키지 설치

solid regular brands

npm i @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

 

 

font awesome 을 react 컴포넌트로 쓸 수 있게 해주는 패키지 설치

npm i @fortawesome/react-fontawesome

 

 

import React from 'react';
import {Link} from 'react-router-dom';
import "./navigation.css";
import {faHome} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

function Navigation(){

    return (
        <div className="navibar">
            <Link to="/">
                <FontAwesomeIcon icon={faHome}/>  
            </Link>
        </div>
    );
}

export default Navigation;

 

faHome 같이 아이콘 이름은 철자를 정확히 지켜줘야하는데

font awesome에서 먼저 검색해보고

 

 

 

 

"@fortawesome/free-solid-svg-icons" 를 컨트롤 + 클릭해서

이름 확인하고 복붙하는게 제일 편한 것 같다

 

size나 rotation 같은 속성도 사용할 수 있음

 

 

 

 

참고 

www.daleseo.com/react-font-awesome/

React에서 Font Awesome 사용하기

 

fontawesome.com/how-to-use/on-the-web/using-with/react

Font Awesome