HTML & CSS - Uicons 사용하기 (손쉽게 아이콘 이미지 삽입)

서론

웹 페이지를 만드는 과정에서 아이콘이나 이미지를 자주 사용하게 됩니다.

이때 아이콘이나 이미지를 구하고 사용하고자 하는 웹페이지에 적용하기에는 상당히 번거로운 과정들이 존재합니다.

본문에서는 flaticon에서 제공하는 Uicons를 사용해서 손쉽게 이미지 또는 아이콘을 추가하는 방법을 알아보겠습니다.

 

 

Flaticon? unicons?

Flaticon은 무료 아이콘을 제공해주는 사이트로 손쉽게 아이콘을 구해서 사용할 수 있습니다.

그중 flaticon에서는 Uicons라는 서비스를 제공해줍니다. 

 

unicons는 범용적인 아이콘을 무료로 제공해 줍니다.

물론 , 어느 정도 라이선스 약관에 따른 제약조건과 저작권 표시가 필요하긴 하지만, 공통된 아이콘을 사용하기 위해서 아주 효율적인 서비스입니다. 

 

직접 해당 링크에 들어가서 제공하는 아이콘을 확인해 보세요.

 

사용하기 1 - 외부 링크를 이용하기 (CDN)

가장 쉽게  사용할 수 있는 방법입니다.

바로 HTML에 link 태그를 통해 삽입하는 방법입니다.

 

링크에서 필요한 아이콘을 선택하면 아래와 같이 링크를 복사할 수 있습니다.

복사한 링크를 HTML에 삽입하고, 태그를 등록하면 손쉽게 아이콘을 불러와서 사용할 수 있습니다.

See the Pen Untitled by Gon (@gon-91) on CodePen.

사용하기 2 - 다운로드해서 사용하기

다른 방법으로는 직접 CSS파일을 다운로드해서 사용하는 방법이 있습니다.

다운로드한 파일을 풀어서 그 경로를 링크하여 사용하면 됩니다.

 

Tips 1 - 라이선스 & 저작권 

당연히 누군가의 노력이 들어간 아이콘들을 쉽게 사용하기 위해서 지켜야 하는 규칙입니다.

해당 서비스의 사용 범위에 대해서 알아봅시다.

• 상업 및 개인 프로젝트
• 디지털 또는 인쇄매체
• 횟수 제한 X, 영구적
• 전 세계 어디서든
• 수정 및 파생 작품 제작 가능

거의 모든 분야에서 사용할 수 있는 무료 서비스입니다. 단, 저작권 표시를 권장합니다.

Uicons by <a href="https://www.flaticon.com/uicons">Flaticon</a>

사용하는 서비스의 가까운 위치에 표시를 해 주세요.

 

Tips 2 - CND VS 다운로드

사용하는 방법은 크게 2가지의 방법이 있다고 했습니다.

편한 방법으로 이용하면 되지만, 몇 가지 차이점이 존재합니다.

 

CDN (외부 링크로 사용하는 방법)

• 최신 버전을 자동적으로 갱신할 수 있다.
• 단, 특정 이유로 서비스 제공 방식이 바뀐다면, 정상적인 동작을 하지 않을 수 있다.

다운로드 방법

• 최신 버전을 갱신하려면 다시 다운로드 해야된다.
• 하지만 직접 관련 정보를 보유하고 있기 때문에 안전한 동작을 보장한다.

Tips 3 - 스타일마다 참조가 다르다.

아이콘을 사용하는 과정에서 여러 스타일이 존재합니다. 이 스타일들은 하나의 CSS에 존재하지 않습니다.

따라서 사용하는 스타일을 적용하는 링크를 잘 설정해 주어야 합니다.

 

Tips 4 - 크기 조정

기본적으로 아이콘을 사용하기 위해서 삽입을 하고, 크기 조정을 하고 싶다면, 폰트의 형태로 존재하기 때문에

font-size 속성을 가지고 크기를 조정해야 됩니다.

 

Tips 5 - SVG를 지원합니다.

만약 글꼴의 형태로 제어하는 것을 원하지 않는다면, SVG를 사용하는 방법도 있습니다.

직접 SVG를 다운로드하거나, 패키지를 다운로드하면 SVG형태의 태그를 직접 사용할 수 있습니다.