-
Adding CSS icons to web pagesIT-Information/Blog-operation 2022. 7. 27. 20:42
웹페이지에 아이콘을 넣는 방법은 여러가지가 있는데, 주로 Font Awesome 이라는 라이브러리를 사용하기도 한다. 폰트 어썸이 아닌 Icomoon 을 사용해 직접 아이콘을 만들어서 넣어보는 것을 해보고자 한다. 아이콘을 만들어서 넣기 위해서는 SVG 확장자의 이미지 파일이 필요하다.
SVG 확장자 아이콘 만들기
아이콘을 만들기 위해서는 Adobe Illustration이 필요하다. 아이콘을 만드는 방법을 진행하고자 하면 아래 포스팅을 보고 생성해서 오면 된다.
원하는 이미지를 아이콘 SVG파일로 만드는 방법 (Illustration)
Adobe Illustration으로 원하는 아이콘을 가져와서 SVG 파일로 만드는 방법에 대해서 알아보려고 한다. SVG 파일은 그림파일을 웹에서 원래그대로 보여질 수 있도록 해주며 코드 친화적인 이미지 파일
goldsystem.tistory.com
Icomoon
SVG 아이콘을 만들었으면 Icomoon 페이지에서 SVG 파일을 HTML에 사용할 수 있는 아이콘으로 변환시켜준다.
아이콘 생성
Icomoon 페이지에서 오른쪽 상단의 IcoMoon App 버튼을 클릭한다.
Icomoon 페이지 다음 Import Icons 을 눌러 Adobe 일러스트로 만든 SVG 파일을 불러오고, 2번 버튼을 클릭해 불러온 아이콘을 눌러준다.
import & image select 
image select 그리고 오른쪽 하단부 Generate Font 를 눌러 아이콘을 생성해준다.
Generate Font 이제 Icomoon으로 직접 만든 아이콘이 HTML에서 사용 가능한 CSS 코드가 생성된 것을 확인할 수 있고, 이 코드를 잘 기억하거나 저장한다.
이제 오른쪽 하단부에 Download 를 눌러 폰트를 다운로드 해준다.
Download HTML 적용
만든 폰트를 HTML에 적용하기 위해 몇가지 단계가 필요하다. 먼저, 다운한 폴더에 style.css 파일을 연다.
Icomoon follder 그리고 style.css 안에 있는 박스 부분에 Fonts를 ./images로 모두 변경한다.
style.css 변경한 Font-face를 티스토리 (Blog) 스킨 편집 CSS 탭 상단부에 복사 붙여넣기 해준다.
스킨 편집 CSS 파일 업로드 탭으로 가서 icomoon 폴더 → Fonts → icomoon 폰트 파일 4개를 전부 업로드 시켜준다.
upload CSS 적용
마지막으로 CSS에 생성한 아이콘 폰트를 적용해주면 된다.
아이콘을 사용하기 위해서는 ::before / ::after 가상 요소 선택자를 사용하면 된다.
만약, class 명이 icon 이라면 css 에서는 .icon:before 또는 .icon:after 가 된다.
<html> <body> <div class="icon"></div> </body> </html>.icon::before { font-family: icomoon; content: '\e928' }CSS 아이콘 코드를 content 안에 넣어주면 된다.
CSS 적용 수직 중앙 정렬
아이콘이 텍스트와 수직 중앙 정렬이 되어 있지 않고, 아이콘만 위에 위치해 있다면 아래 코드를 추가해본다.
.적용할 class::before { font-family: icomoon; content: '\e928'; display: inline-block; vertical-align: middle; }display: inline-block;과 verical-align: middle; 를 사용해 수직중앙 정렬이 되면서 아이콘과 텍스트의 위치가 같아진다.
결과
result 생성한 Icomoon 폴더는 백업해 두고 추후에 재사용이 가능하다. demo.html 에는 만들었던 아이콘의 코드가 들어 있고, selection.json 파일에 Icomoon 페이지에 Import 하면 새로운 아이콘을 추가할 때 이 전에 만들었던 아이콘을 불러올 수 있다.