본문 바로가기

디지털노마드/WordPress 강좌

Font awsome을 이용한 홈페이지 로고와 파비콘 등록하기

Font awsome 페이지에 들어가면 다양하고 예쁜 아이콘 파일들을 다운 받을 수 있습니다. 먼저 아래 주소로 들어가 봅시다. 

 

fontawesome.com/

 

Font Awesome

The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

fontawesome.com

아이콘 이미지와 코드 다운 받기

 

폰트 어썸 홈페이지에 들어가면 무료로 사용할 수 있는 아이콘과 유료 아이콘들이 있습니다. 여기서 무료 아이콘을 사용해 봅시다. 

fan 모양의 아이콘을 찾았습니다. 여기서 ' start using this icon' 버튼을 누릅니다. 

팝업 윈도우가 열리고 이 아이콘을 사용할 수 있는 태그가 보입니다. 코드를 선택해서 복사해줍니다. 이 코드는 내 홈페이지의 HTML 코드에 적용해 사용할 수 있습니다.

 

만약 이미지 자체를 사용해 보고 싶다면 이미지에 마우스를 대고 우측 버튼을 눌러 'save image as'로 저장해서 사용해 봅시다. 

 

다운받은 이미지를 로고로 등록하기

1. 다음 본인의 워드프레스 홈페이지로 갑시다. 홈페이지 좌측 상단의 'customize'를 누릅니다. 

2. 아래와 같은 사이드 메뉴가 열리면 이제부터 내 홈페이지에 로고를 입력해 줄 수 있습니다. 여기서 'site identity'메뉴를 누르고  'Select logo' 를 누릅니다. 

3. 앞에서 다운 받은 이미지를 Select logo  창에서 'Upload logo' 를 눌러 등록합니다. 크기가 클때는 우측상단의 'Edit image'를 눌러 크기를 조절합니다. 

4. Edit image 창에서 width 크기를 100px 로 적고 'scale' 버튼을 누릅니다. 다음 'update' 버튼을 누르면 크기가 조절되어 저장됩니다. 

5. 조절된 아이콘을 Site icon과 logo선택 한 후 'Publish' 버튼을 눌러 저장 합니다. 이제 내 홈페이지에 로고 아이콘과 파비콘이 생성된것을 볼 수 있습니다.