블로그에 간단하게 사용하면서도 깔끔하고 예쁜 아이콘을 적용하는 방법을 알아보겠습니다.
블로그 레이아웃이 깔끔하게 보이는 메인화면에는 어김없이 사용하는 아이콘 폰트인 폰트어썸 (FontAwesome) 를 사용하고 있습니다. 특수문자는 어딘가 부적절하고 둔탁한 어울리지 않아 보이는데요, 아이콘 폰트를 사용하면 훨씬 산뜻한 맛이 납니다. 블로그 레이아웃을 꾸미는데 시간을 들이지 말라고 하지만 많은 시간을 들이지 않고도 꾸밀 수 있습니다.
아이콘 폰트를 제공하는 사이트는 폰트어썸입니다.
홈페이지입니다. 여기서 상단 아이콘 탭으로 들어갑니다.
원하는 아이콘을 선택합니다.
원하는 아이콘이 맞는지 확인하고 HTML 소스를 복사합니다. 그리고 꼭 있어야 하는 것이 해당 아이콘의 Unicode 값입니다. 위에 보면 이 아이콘의 유니코드 값은 f5ad입니다.
구글블로그에서는 HTML 편집 화면 <head>바로 아래 이 코드를 넣습니다. 티스토리 블로그에서도 마찬가지로 HTML화면에 아래 코드를 추가합니다.
<!-- FontAwesome CSS 파일 추가 -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>
폰트어썸 (FontAwesome) 를 사용하는 방법은 두 가지입니다.
1. style
2. CSS
style로 사용하는 것은 HTML 화면에서 전체 코드를 그대로 넣으면 됩니다. 일회성일 때 이렇게 사용하면 되지만 홈페이지 꾸밀 때는 보통은 CSS로 넣고 글래스로 사용하죠. 홈페이지 제작하면서 style로 처리했다면 하수취급받을 겁니다.
<style>
/* 스타일을 적용할 클래스에 대한 CSS 규칙 */
.f105-icon::before {
content: '\f105';
font-family: 'Font Awesome 5 Free';
font-weight: 900; /* 솔리드 스타일의 아이콘을 사용할 경우 900으로 설정 */
color : #666;
padding 0, 0, 0, 20;
}
</style>
<span class="f105-icon"> 관리자</span>
이 코드를 게시판 html 보기에서 그대로 넣으면 f105에 해당하는 아이콘이 보입니다. f105 아이콘은 특수문자 '>'와 비슷합니다.
지금은 특수문자 >
여기는 폰트 아이콘 관리자 입니다.
다른 아이콘을 적용할 때도 위 코드에서 해당 아이콘의 클래스 이름과 유니코드를 바꾸어서 사용하면 됩니다. 물론 클래스 이름은 자신의 사이트에 맞게 바꾸어도 됩니다만, 유니코드는 지정된 값으로 넣어야 합니다.
/* 스타일을 적용할 클래스에 대한 CSS 규칙 */
.fa-pen-nib::before {
content: '\f5ad';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
/* 추가적인 스타일링을 원하는 경우 여기에 추가 */
font-size: 24px; /* 예시: 아이콘 크기를 24px로 설정 */
color: #ff0000; /* 예시: 아이콘 색상을 빨간색으로 설정 */
}
위 코드를 CSS에 넣습니다. CSS가 분리되어 있지 않은 구글 블로그는 속성이 있는 위쪽이 CSS, 아래쪽이 HTML입니다.
Layout (end) 윗부분에 넣으면 됩니다.
이제 게시판에서는 사용하는 방법은 원하는 위치에 이 코드를 넣으면 됩니다.
<span class="fas fa-pen-nib"></span>
분명히 클래스 이름은 fa-pen-nib 이었는데, 이렇게 넣으면 아이콘이 나오지 않습니다.
예시처럼 fas를 앞에 넣어줘야 합니다. 어썸 폰트에서는 이렇게 설정해야 하죠. 앞에 붙이는 글래스 이름에 따른 종류가 있는데요,
fas: 솔리드 스타일 아이콘
far: 빈 테두리 스타일 아이콘
fab: 브랜드 로고 아이콘
하지만 모든 아이콘에 사용할 수 있는 것은 아니면 far 클래스는 Regular 스타일의 아이콘을 나타내며, Regular 스타일을 가진 펜 아이콘은 FontAwesome에 기본으로 포함되어 있지 않습니다. 마찬가지로 ""fab" 클래스를 사용해도 fa-pen-nib"이라는 클래스 명이 브랜드 로고 아이콘과 관련이 없기 때문에 적용되지 않습니다.
어렵게만 생각해서 시도하지 않았는데 이번 구글 블로그 메인 화면에서 관리자 화면으로 들어가는 버튼을 만들면서 적용해 보았습니다.
font-weight: 900; 은 굵기를 나타내는데, 게시판에서는 50까지 설정해도 제대로 나오는데요, 레이아웃에서는 원하는 가늘기로는 나오지 않습니다. 어떤 구조적인 문제가 있네요.
어떤가요, 간단하죠.