Remix icon - fontawesome 대신 쓰기 시작한 무료 아이콘 폰트

전부터 웹 개발을 할 때면 무료 아이콘 폰트로 font awesome을 주로 이용을 했습니다.

근데 과거 cdn으로 추가만 하면 될 때와는 다르게 이메일을 적으면 킷을 주는 방법으로 바뀌었습니다.

이것도 최초 1회만 주는데 나는 받아놓고 다시 받아보려 하니깐 역시 되지가 않습니다.

 

또한 약 7000개의 아이콘이 있지만 무료로 사용할 수 있는 아이콘의 숫자는 약 1500개가량..

 

그래서 새로이 선택한 것이

Remix icon

입니다.

 

1700개가량의 무료 아이콘과

svg와 npm, cdn 그리고 다운로드까지 지원을 합니다.

 

remix icon 공식 홈페이지에 가면 원하는 해당 아이콘 이미지를 누르면 svg형태로 다운로드할 수 있습니다.

 

이용은 아래와 같이 하면 됩니다.

<img height="32" width="32" src="img/admin-fill.svg" />

 

그리고 npm, cdn, 다운로드는 해당 깃허브 페이지에 가면 상세히 적혀있습니다.

 

이용방법은 아래와 같이 하면 됩니다.

<!-- class 선언 방식은 remixicon-{name}-{style} -->
<!-- line은 선으로 따져있는 아이콘이고 fill은 안이 채워져 있는 아이콘이다 -->
<!-- size는 xxs부터 xl 그리고 그 이후는 2x부터 10x까지 지원이 된다 -->
<div style="font-size: 24px;">
  <i class="remixicon-macbook-fill"></i>
  <i class="remixicon-macbook-line ri-fw"></i> <!-- fixed width -->
  <i class="remixicon-macbook-line ri-xxs"></i> <!-- 0.5em -->
  <i class="remixicon-macbook-line ri-xs"></i> <!-- 0.75em -->
  <i class="remixicon-macbook-line ri-sm"></i> <!-- 0.875em -->
  <i class="remixicon-macbook-line ri-1x"></i> <!-- 1em -->
  <i class="remixicon-macbook-line ri-lg"></i> <!-- 1.3333em -->
  <i class="remixicon-macbook-line ri-xl"></i> <!-- 1.5em -->
  <i class="remixicon-macbook-line ri-2x"></i> <!-- 2em -->
  <i class="remixicon-macbook-line ri-3x"></i> <!-- 3em -->
  <!-- 4 ~ 9 -->
  <i class="remixicon-macbook-line ri-10x"></i> <!-- 10em --> 
</div>

해당 코드의 결과물은 https://codepen.io/dev-kidult/pen/OJLxPXe

remix-icon

에 들어가면 확인해 볼 수 있습니다.

 

아 그리고 이용에 관해서는 아파치 2.0 라이센스이므로 참고하고 이용을 하면 됩니다.