반응형
웹사이트에 아이콘을 넣는 방법은 워낙 많기에 취향대로 하면 됩니다만,
심플한 몇개의 대표적인 아이콘들만 이용하고 싶다 + 폰트 어썸처럼 자신의 kit 번호같은 것을 넣는게 싫다 싶은 경우엔 Simple Line Icons도 하나의 대안이 될 수 있을 것입니다.
#1 아이콘 샘플
이름과 같이 아래와 같은 매우 심플한 디자인은로 되어있습니다.
#2 사용 방법
홈페이지
다운로드하여 사용하는 방법
(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 라이센스로 상업용으로도 사용 가능하다고 명시되어 있습니다.
반응형