무료 버튼 아이콘 사이트 추천 / Font Awesome Icons / 폰트 아이콘

무료 버튼 겸용 아이콘 사이트를 추천해요 ㅎㅎ

무료(상용 가능)이고 (하단의 라이센스 정보를 포함하고 있으니 참고 바람)

 

아이콘 종류가 많고

 

사용이 간편하다.

버튼으로도 사용이 가능하고 때로는 이미지 아이콘처럼 사용도 가능하다

 

이미지를 폰트로 만든다고 하는데 개념이고 뭐고 잘 모르겠고

 

이미지보다 낫다고들 한다.

 

일단 편하고 종류가 많고 이미지작업을 안해도된다.

 

http://fortawesome.github.io/Font-Awesome/

여기에 방문해서 화면의 다운로드를 눌러

다운 받으면 된다.

font-awesome-x.x.x 폴더 내부에 있는 파일들(css를 비롯한 각종 폴더들)을

진행중인 프로젝트에 위치시킨다.

아이콘 확인 방법은

화면의 빨간 박스로 표시된 메뉴를 누른다.

그럼 아래와 같은 사용이 가능한

아이콘 목록이 나온다.

그중 사용하고 싶은 아이콘 아나를 누른다.

다음과 같이 코드가 나오고

이 코 드를 복사하면 끝이다 ^^

사용방법은 엄청 심플하다 ㅎㅎ

사이즈 조정 및 색 조절을 통해서 자유롭게 사용 할 수 있다.

다음은 라이센스 정보이다.

상용으로 사용도 가능하며 자유롭게

이용 가능하다 ^^

 

 

자세한 사용방법은 아래 주소를 참고한다.

http://fortawesome.github.io/Font-Awesome/examples/

 

아이콘 샘플은 :

http://fortawesome.github.io/Font-Awesome/icons/

팁 :

<i class='fa fa-step-forward faPointer></i>

 

faPointer라는 클래스를 하나 추가하고

아래처럼 css를 주면 그럴듯한 버튼처럼 쓸 수 있음

.fa{
 font-size: 14px;
 text-align: center;
 opacity: 0.2;
 padding: 5px;
}
.faPointer{
 cursor: pointer;
 opacity: 1;
}
.faPointer:hover{
 opacity: 0.2;
}
 

 

 

도움이 되셨다면 공감을 부탁드립니다. ^^