본문 바로가기

[CSS] input submit 버튼의 텍스트에 font awesome 아이콘 사용하기

반응형
겁나 유용한 Font Awesome을 사용하다 input submit 타입에서 막혔다

 

 

열심히 사이트 작업을 하던 중 이번 포스팅의 제목처럼 input submit 타입에서 막혔다.

 

말인 즉, input 타입중 submit 타입은 value 로 버튼 안의 텍스트를 제어 하는데...

 

이 안에 <i> 태그를 사용하지 못하기 때문에 곤란해졌었다.

 

맨처음에는 스트립트로 제어를 하려 했는나...안되기는 마찬가지...

 

분명히 나와 같은 문제를 겪었던 사람이 있을텐데...

 

네이버 검색에서는 일단 font Awesome 에 대한 자세한 내용은 없었다.

 

온통 그냥 font awesome 어떻게 사용하는 지에 대한 포스팅만 많을 뿐...문제점에 대한 포스팅은 없었다.

 

그래서 구글링으로 넘어갔다...단박에 찾음...구글링의 위대함을 다시 한번 더 느낀다 ㅎ

 

이 문제의 요약은 font awesome 치트키(CSS Class, Unicode)를 사용한다는 것이다.

 

 

CSS:

input[type="submit"] { font-family: FontAwesome;
}

 

HTML:

<input type="submit" class="search" value="&#xf002;" />

 

 

css 에서 input submit 타입에서 폰트를 FontAwesome 으로 선언하고

 

input 박스의 value 에 사용하고자 하는 아이콘의 해당하는 유니코드를 입력하면 해결~!

 

심플하구만 ^^;

 

각 아이콘의 유니코드는 아래 링크에 정리되어 있다.

 

 

clickButton

 

 


이상 포스팅을 마칩니당 ㅎ

 

 

출처 - http://stackoverflow.com/questions/15988373/how-do-i-add-a-font-awesome-icon-to-input-field

 

 

2014.11.3.

반응형