아는만큼 보여요

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 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에 이름을 넣어보면 적용된걸 확인할 수 있다.

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

sencha touch 에서 300개 이상의 icon을 제공한다.

하지만 기본적으로 쓸 수 있는건 20여개 정도다 이 300여개 icon 사용법을 알아보자

생성한 프로젝트 폴더안이나 다운받은 센차폴더안에 touch-> resources-> themes-> images-> default-> pictos 폴더안을 보면

수많은 icon이미지들이 있다.

이 아이콘을 센차에서 사용하는 방법을 살펴보자

우선 사용할 아이콘을 고른후 

resources-> sass-> 사용자 scss파일(프로젝트 생성시 app.scss이 적용된다)에 쓰고 싶은 아이콘을 추가한다.

이 scss파일을 컴파일 해야 이 아이콘 이미지들을 사용할 수 있다.

컴파일을 하면 이 scss파일을 참조해 css파일을 생성합니다. 

우리는 이 생성된 css 파일을 사용하게 되는 것입니다.

터미널 창에서 sass폴더로 경로를 이동합니다.

이동방법을 모르면 cd를 입력후 해당 폴더를 터미널 창에 끌어다 놓습니다.

그리고 compass compile <scss파일이름>을 입력해 컴파일 합니다.

컴파일이 끝나면 이미지를 사용할 수 있습니다.

사용은 iconCls에 추가한 이미지 이름을 그대로 사용하면 됩니다.

다음과 같이 추가된 icon 이미지가 나타납니다.