mbg1346 - Google Material Icons 사용하기

첨부파일	등록일	파일크기	다운 수
fonts.zip	2016.03.05	250.8KB	6

Extra Form
원작자	80san
적용여부	적용

XE에서 프로그램을 만들다 보면 아이콘들을 많이 사용하게 됩니다.

그때마다 일일이 css에 이미지아이콘들을 설정해주곤합니다.

이런경우 코딩도 번거롭고 이미지의 용량도 차지하죠

그런 경우를 대비하여 구글에서 쉽게 적용 할 수 있는 Material Icons을 배포하고 있습니다.

[적용방법] http://google.github.io/material-design-icons/#icon-font-for-the-web

* 위의 이미지와 같이 게시판보드 스킨을 예제로 합니다.

1. fonts.zip 파일을 내려받아서 압축을 풀어서 스킨 ( /modules/board/skins/default/fonts )방에 업로드합니다.

2. 게시판스킨의 기본적인 css파일에 아래의 소스를 추가합니다. ( /modules/board/skins/default )

/* Google Material Icons Fonts*/
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;


  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;


  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;


  /* Support for IE. */
  font-feature-settings: 'liga';
}


/* Rules for sizing the icon. */
.material-icons.md-16 { font-size: 16px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }


/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }


/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }


.material-icons.orange600 { color: #FB8C00; }
.material-icons.blue600 { color: #0066cc; }


i{
vertical-align: middle;
padding:0 5px 0 0;
}

3. 적용될 html파일을 열어서 Material Icons를 적용합니다.

list.html의 쓰기 앞에 적용해봅니다.

수정전

<a href="{getUrl('act','dispBoardWrite','document_srl','')}" class="btn">{$lang->cmd_write}</a>

수정후
<a href="{getUrl('act','dispBoardWrite','document_srl','')}" class="btn"><i class="material-icons md-16">create</i>{$lang->cmd_write}</a>

<i class="material-icons md-16">create</i>

이 부분이 Material Icons 소스입니다.

create 이 부분이 아이콘의 명칭입니다.

https://design.google.com/icons 에 접속하면 여러개의 아이콘 명칭이 있습니다.

자신이 원하는 아이콘명칭을 지정해주시면 됩니다.

참고로 arrow forward의 경우 arrow_forward와 같이 언더바를 주시면 됩니다.

참 쉽죠! 잉~~

Google Material Icons 사용하기

단축키

Articles