728x90
Font Awesome 라이브러리 사용
npm install @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons @fortawesome/fontawesome-svg-core
해당 코드를 npm 에 입력해주기
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
리액트에서 사용할 아이콘을 import 해서 사용
주의할 점
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
function Pages() {
return (
<div class="pages">
<a href="#">
<i class="fas fa-angle-left"></i>{" "}
</a>
<ol>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
</ol>
<a href="#">
{" "}
<i class="fas fa-angle-right"></i>
</a>
</div>
);
}
이렇게 마냥 코드만 옮겨주면 안된다.
- React에서 FontAwesomeIcon을 사용했지만 여전히 <i> 태그를 사용하고 있음.
- 리액트에서 FontAwesomeIcon을 사용하려면 <i> 태그 대신 FontAwesomeIcon 컴포넌트를 사용해야 함
- 클래스 속성에 class가 아닌 className을 사용해야 함.
- 리액트에서는 HTML의 class 속성이 className으로 바꾸기
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleLeft, faAngleRight } from "@fortawesome/free-solid-svg-icons";
function Pages() {
return (
<div className="pages">
{" "}
{/* class -> className */}
<a href="#">
<FontAwesomeIcon icon={faAngleLeft} />
</a>{" "}
{/* <i> 태그 대신 FontAwesomeIcon 사용 */}
<ol>
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
</ol>
<a href="#">
<FontAwesomeIcon icon={faAngleRight} />
</a>{" "}
{/* <i> 태그 대신 FontAwesomeIcon 사용 */}
</div>
);
}
export default Pages;
이렇게 수정해줌.
728x90
'> 클론코딩 > 분석 및 활용' 카테고리의 다른 글
[CSS] 페이지 제작하기 (0) | 2024.09.06 |
---|---|
[CSS] Draw Underline Link Hover Effect (0) | 2024.08.05 |
html css 부드럽게 흐르는 슬라이드 만들기 (0) | 2024.07.30 |
[CSS] Play and Pause in Infinite Slider with CSS Only (2) (1) | 2024.07.24 |
[CSS] Play and Pause in Infinite Slider with CSS Only (1) (2) | 2024.07.23 |