메뉴 내 버튼 스타일
메뉴 내 버튼을 스타일링하고, 아이콘을 작성하는 방법에 대해 알아보겠습니다.
메뉴 내 버튼 스타일
.navbar .btn {
margin-right: 24px;
}
margin-right: 24px;: 오른쪽 여백을 24px로 설정합니다.
메뉴 내 버튼 스타일
.fas.fa-arrow-right {
margin-left: 8px;
font-size: 14px;
}
-
margin-left: 8px;: 왼쪽 여백을 8px로 설정합니다. 이를 통해 버튼 안에 있는 화살표 아이콘에 자연스러운 여백을 제공합니다. -
font-size: 14px;: 아이콘의 글자 크기를 14px로 설정합니다.
아이콘 작성방법
아이콘을 작성하는 방법은 다양합니다.
직접 그리거나 이미지를 사용하는 방법 외에도, fontawesome과 같은 아이콘 라이브러리를 활용할 수 있습니다.
fontawesome 라이브러리 불러오기
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm"
crossorigin="anonymous"
/>
아이콘 사용을 위해 <link> 태그를 이용하여 fontawesome 라이브러리의 CSS 파일을 불러옵니다.
fontawesome 라이브러리 사용하기
<i class="fas fa-arrow-right"></i>
fontawesome 라이브러리를 사용하면, 단순히 클래스에 fas fa-arrow-right와 같이 아이콘의 이름을 지정함으로써 쉽게 아이콘을 추가할 수 있습니다.
추가적으로, fontawesome의 공식 웹사이트에서 다양한 아이콘을 검색하여 사용할 수 있습니다.
다음 내용이 궁금하다면?
코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!