[sencha touch] custom icon 사용하기

sencha 2.2.1 에서는 pictos폴더에 이미지를 넣고 사용하면 됐었다. 아래 링크 설명

(http://squll1.tistory.com/entry/sencha-touch-300%EC%97%AC%EA%B0%9C%EC%9D%98-icon-image-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0)

2.3.1도 같은줄 알았는데 컴파일중 에러 발생..

이제 @include icon를 사용해야 한다.

그리고 이미지 파일이 아니라 font파일을 사용..

실습을 위해서 http://icomoon.io/app/방문후 폰트 파일을 다운해 보자

아이콘 선택후 하단 폰트 버튼 클릭

아이콘 옆에 화살표 모양 클릭

Reset codes버튼 클릭

그러면 ㅁ 으로 있던 공간에 문자가 생겼다.

이 문자가 해당 아이콘 이름이라고 생각하면 된다.

이제 하단 다운 로드 버튼을 누르고 받을 파일 압축을 풀어보자

다운파은 파일의 font폴더 안에 있는 eot, svg, ttf, woff파일을 resources -> sass -> stylesheets -> font ->pictos 폴더안에 복사한다.

이제 resources -> sass 안에 scss파일을 열어 다음과 같이 입력해 보자

@include icon-font('icomoon',inline-font-files('pictos/icomoon.woff',woff,'pictos/icomoon.ttf',truetype,'pictos/icomoon.svg',svg));

@include icon('home3','!','icomoon');

@include icon('history3',"'",'icomoon');

@include icon('setting3','&','icomoon');

@include incon() 안의 첫번째 인자는 iconCls에서 사용할 이름이고 두번째는 폰트 파일 받을때 생성됐던 이름 

세번째는 @include icon-font의 이름이다.

이제 이 scss파일을 컴파일 하고 (http://squll1.tistory.com/entry/sencha-touch-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%83%89%EA%B9%94%EC%9D%98-button-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0 하단)

iconCls에 이름을 넣어보면 적용된걸 확인할 수 있다.

직접 디자인한 이미지를 사용하고 싶다면 디자이너에게  폰트로 만들어 달라고 하자ㅋ