버튼 아이콘 폰트 기능 가이드

버튼 컴포넌트 외부 아이콘 폰트 사용 샘플 화면이다.

외부 아이콘 폰트의 예로는 Font Awesome, Google Material Symbols 등이 있다.

외부 아이콘 폰트 사용을 위한 환경 구성 방법은 해당 폰트 정보 제공 홈페이지를 참조한다.

관련 속성으로 text_prefixicon_class, text_postfixicon_class, text_prefixicon_text, text_postfixicon_text가 있다.

템플릿 위치: /HTML5/COMPONENT/BUTTON/button_iconfont

템플릿 파일

• button_iconfont.xml
• button_iconfont.js
• 새창으로 실행

function screen_on_load()
{
	btn_load_googleicon_on_click();
	btn_load_awesome4_on_click();
}

// "load font awesome 4" 버튼 이벤트
function btn_load_awesome4_on_click(objInst)
{
	var xf_head;

	// Font Awesome 4 폰트 사용법
	// https://www.w3schools.com/icons/fontawesome_icons_intro.asp
	// https://fontawesome.com/

	// 아래 소스는 템플릿에서 사용하기 위한 임시용 소스 입니다.
	// 프로젝트 환경에서는 일반적으로 구글 아이콘 폰트를 다운로드 받아 서버에 구성하고
	// 화면 로더 HTML 파일에 해당 폰트에 대한 정보를 CSS에 추가해서 환경을 구성합니다.
	xf_head = $(document.head);
	xf_head.append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">');

	var css_html = [];

	css_html.push('<style>');

	// Font Awesome 공통 CSS 클래스 재정의
	css_html.push('.fa { ');
	css_html.push('	padding-top: 1px;');	// 수직 정렬 맞추기 위해 패딩 조정
	css_html.push('}');

	css_html.push('</style>');

	xf_head.append(css_html.join('\n'));
}

// "load google icon" 버튼 이벤트
function btn_load_googleicon_on_click(objInst)
{
	var xf_head;

	// 구글 아이콘 폰트 사용법
	// https://www.w3schools.com/icons/google_icons_intro.asp
	// https://fonts.google.com/icons

	// 아래 소스는 템플릿에서 사용하기 위한 임시용 소스 입니다.
	// 프로젝트 환경에서는 일반적으로 구글 아이콘 폰트를 다운로드 받아 서버에 구성하고
	// 화면 로더 HTML 파일에 해당 폰트에 대한 정보를 CSS에 추가해서 환경을 구성합니다.
	xf_head = $(document.head);
	xf_head.append('<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">');

	var css_html = [];

	css_html.push('<style>');

	// 구글 아이콘 폰트 기본 크기는 24px이다.

	// 방법1.
	// 부모 폰트 크기 기준으로 배율로 폰트 크기를 조정하는 방식
	// text_prefixicon_class 속성값에 "material-icons md-all" 식으로 지정
	// 구글 아이콘 폰트 공통 CSS 클래스 재정의
	css_html.push('.material-icons.md-all {');
	css_html.push('	font-size: 1.2em;'); 		// 버튼 폰트 크기의 1.2배로 지정
	// css_html.push('	padding-top: 1.2px;');	// 수직 정렬 맞추기 위해 패딩 조정
	css_html.push('}');

	// 방법2.
	// 미리 크기를 지정하는 방식
	// text_prefixicon_class 속성값에 "material-icons md-18"식으로 지정
	css_html.push('.material-icons.md-18 { font-size: 18px; }');
	css_html.push('.material-icons.md-24 { font-size: 24px; }');
	css_html.push('.material-icons.md-36 { font-size: 36px; }');
	css_html.push('.material-icons.md-48 { font-size: 48px; }');

	css_html.push('</style>');

	xf_head.append(css_html.join('\n'));
}