개발 도구 (Development Tools)/Library

심플한 아이콘이 필요할 때 - Simple Line Icons

BiCute 2022. 7. 27. 08:00
반응형

 

웹사이트에 아이콘을 넣는 방법은 워낙 많기에 취향대로 하면 됩니다만, 

심플한 몇개의 대표적인 아이콘들만 이용하고 싶다 + 폰트 어썸처럼 자신의 kit 번호같은 것을 넣는게 싫다 싶은 경우엔 Simple Line Icons도 하나의 대안이 될 수 있을 것입니다.

 

 

#1 아이콘 샘플

  이름과 같이 아래와 같은 매우 심플한 디자인은로 되어있습니다.

 

 

 

#2 사용 방법

 

홈페이지

Simple Line Icons >

 

다운로드하여 사용하는 방법

  (1) 홈페이지 오른쪽 위에 있는 Download icons pack 버튼을 눌러 파일을 다운 받습니다.

 

  (2) 자신이 작업하고 있는 폴더에 css와 fonts 폴더를 함께 넣어줍니다.

  ※ CSS 파일에 기본 설정 경로가 아래와 같이 되어있기 때문에 내부 파일만 같은 폴더로 옴기시면 동작하지 않습니다. 

@font-face {
  font-family: 'simple-line-icons';
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0');
  src: url('../fonts/Simple-Line-Icons.eot?v=2.4.0#iefix') format('embedded-opentype'), url('../fonts/Simple-Line-Icons.woff2?v=2.4.0') format('woff2'), url('../fonts/Simple-Line-Icons.ttf?v=2.4.0') format('truetype'), url('../fonts/Simple-Line-Icons.woff?v=2.4.0') format('woff'), url('../fonts/Simple-Line-Icons.svg?v=2.4.0#simple-line-icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

 

  (3) 작업하고있는 HTML문서의 <head> 내부에 CSS파일을 연결해 줍니다.

/* Sample */
<link rel="stylesheet" href="./css/simple-line-icons.css">

 

  (4) 아래 예와 같이 필요한 곳에 아이콘 코드를 클래스로 추가해 줍니다.

<span class="icon-user"></span>

 

 

CDN 방식으로 사용하는 방법

 

(1) 작업하고 있는 HTML문서의 <head> 내부에 다음 코드를 삽입합니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">

 

(2) 아래 예와 같이 필요한 곳에 아이콘 코드를 클래스로 추가해 줍니다.

<span class="icon-user"></span>

 

 

 

#3. 라이센스

 

MIT 라이센스로 상업용으로도 사용 가능하다고 명시되어 있습니다.

 

 

 

 

반응형