FontAwesomeIcon 아이콘 사용하는 방법
안녕하세요! 이번 포스팅에서는 FontAwesomeIcon을 사용하여 웹 페이지의 목차를 더욱 깔끔하고 시각적으로 매력적으로 만드는 방법을 소개하려고 합니다.
FontAwesomeIcon은 다양한 아이콘을 제공하여 웹사이트의 디자인을 향상시키는 데 유용한 도구입니다.
1) FontAwesomeIcon 적용 전후
먼저, 적용 전후의 차이를 확인해보겠습니다.
FontAwesomeIcon을 적용하기 전에는 목차가 단조롭게 보일 수 있지만, 적용 후에는 시각적으로 구분하기 쉬워집니다.
적용 전 화면:
- 밋밋하고 단조로운 목차 리스트
- 시각적 구분이 어려움
적용 후 화면:
- 아이콘이 추가된 목차 리스트
- 시각적으로 구분이 쉬워지고, 사용자 경험이 향상됨
아이콘을 추가함으로써 목차가 더 직관적이고 보기 좋아졌습니다.
2) FontAwesomeIcon 사용 방법
FontAwesomeIcon을 사용하는 방법을 단계별로 설명하겠습니다.
먼저, 필요한 패키지를 설치합니다.
터미널을 열고 아래 명령어를 실행하여 FontAwesomeIcon 관련 패키지를 설치합니다
>> npm install @fortawesome/free-regular-svg-icons
FontAwesomeIcon을 사용하기 위해 필요한 설정을 _app.js 파일에 추가합니다.
아래 코드를 해당 파일에 추가합니다
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
config.autoAddCss = false;
이제 실제로 아이콘을 적용할 소스 코드에 FontAwesomeIcon을 사용합니다.
예를 들어, 사용자 아이콘을 적용하려면 아래와 같이 코드를 작성합니다
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faUser} from "@fortawesome/free-solid-svg-icons";
<FontAwesomeIcon icon={faUser} />
위 코드를 사용하면 사용자 아이콘이 화면에 표시됩니다.
3) 동적으로 아이콘 적용방법
이제 목차에 맞게 동적으로 아이콘을 적용하는 방법을 살펴보겠습니다.
예를 들어, 목차 데이터를 데이터베이스에서 가져와서 각 항목에 아이콘을 동적으로 적용할 수 있습니다.
데이터베이스에 board_icon이라는 컬럼을 추가하여 각 목차별로 사용할 아이콘을 저장합니다.
예를 들어, 다음과 같은 구조로 테이블을 설정할 수 있습니다:
board_icon이라는 컬럼에서 목차별로 가져오고 싶은 아이콘을 저장 하였습니다.
그리고 페이지 로드시 목차 데이터를 가져올 때 해당 아이콘의 값을 세팅하도록 구현하였습니다.
서버에서 데이터를 가져와서 아이콘을 설정하는 예제입니다.
데이터를 가져오는 부분은 아래와 같이 작성할 수 있습니다:
FontAwesomeIcon을 사용하면 웹 페이지의 디자인을 쉽게 향상시킬 수 있습니다.
정적인 아이콘 적용부터 동적인 아이콘 설정까지 다양한 방법으로 아이콘을 활용할 수 있습니다.
FontAwesome 웹사이트에서 다양한 아이콘을 확인하고, 필요한 아이콘을 프로젝트에 적용해보세요.
오늘도 읽어주셔서 감사합니다. 궁금하신 점이 있다면 댓글 남겨 주세요.
감사합니다. 😊