@font-face kits를 이용하여 버튼 아이콘 만들기-고급팁

demun
퍼블리셔/css
2012. 1. 22. 06:00

CSS3가 많이 보편화 됐습니다. 익스플로러만 사용하지 않는다면 거의 모든 브라우져들이 html5와 CSS3를 많이 지원합니다.
이번에는 웹폰트를 활용해서 버튼을 만들고 아이콘까지 포함되는 방법을 알아보겠습니다.
이것은 이미지없이 CSS 코드만으로 버튼을 만들고 아이콘까지 적용하는 방법입니다.
완성작을 한번 보여드리겠습니다.

먼저 html 마크업은 아주 간단합니다. 아래와 같습니다.

<a href="#" class="button"> Download </a>

다음은 CSS 코드입니다.

body {
	width: 500px;
	margin: 200px auto;
	background: #666;
}

.button {
	width: 450px;
	height: 100px;
	line-height: 100px;
	color: #333;
	text-decoration: none;
	font-size: 60px;
	font-family: helvetica, arial;
	font-weight: bold;
	display: block;
	text-align: center;
	position: relative;

	/* BACKGROUND GRADIENTS */
	background: #CCCCCC; /* Old browsers */
	background: -moz-linear-gradient(top,  #CCCCCC 0%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* IE10+ */
	background: linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#666666',GradientType=0 ); /* IE6-8 */

	/* BORDER RADIUS */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	border: 1px solid #CCCCCC;
	border-top: 1px solid #F5F5F5;

	/* TEXT SHADOW  */
	text-shadow: 1px 1px 0 #fff;

	/* BOX SHADOW */
	-moz-box-shadow: 0 1px 3px black;
	-webkit-box-shadow: 0 1px 3px black;
	box-shadow: 0 1px 3px black;
}

/* WHILE HOVERED */
.button:hover {
	background: #AAAAAA; /* Old browsers */
	background: -moz-linear-gradient(top,  #AAAAAA 0%, #444444 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AAAAAA), color-stop(100%,#444444)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* IE10+ */
	background: linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAAAAA', endColorstr='#444444',GradientType=0 ); /* IE6-8 */
}

/* WHILE BEING CLICKED */
.button:active {
	-moz-box-shadow: 0 2px 6px black;
	-webkit-box-shadow: 0 2px 6px black;
}

코드를 보시면 버튼클래스를 부여해서 text-shadow, gradient, box-shadow, border-radius 등을 설정해두었습니다.
그라데이션은 http://www.colorzilla.com/gradient-editor/ 를 이용하시면 편리합니다.
그럼 아래처럼 보여집니다.

여기까지는 일반적입니다.
노하우는 여기서부터 시작입니다.
웹폰트를 사용하게 해주는 사이트가 있지요.
http://www.fontsquirrel.com/fontface 입니다.

여기서 보시면 다양한 폰트를 볼수 있습니다.
저는 여기서 Symbol Signs 를 선택했습니다.
주소 : http://www.fontsquirrel.com/fontfacedemo/Symbol-Signs

다운로드를 받아서 압축을 해제하고 stylesheet.css 를 열어서 복사, 붙여넣기 했습니다.
코드를 티스토리에서 사용할수 있도록 저는 images 폴더안에 폰트를 넣고 스타일시트를 아래처럼 변경했습니다.
그냥 참고만 하세요.

중요한것은 CSS 코드입니다.
스타일 선언하는 곳 제일 위에 아래의 코드를 추가해줍니다.

/* CUSTOM FONT | http://www.fontsquirrel.com/fontfacedemo/Symbol-Signs */
@font-face {
	font-family: 'SymbolSignsBasisset';
	src: url('images/symbol-signs-webfont.eot');
	src: url('images/symbol-signs-webfont.eot?#iefix') format('embedded-opentype'),
		 url('images/symbol-signs-webfont.woff') format('woff'),
		 url('images/symbol-signs-webfont.ttf') format('truetype'),
		 url('images/symbol-signs-webfont.svg#SymbolSignsBasisset') format('svg');
	font-weight: normal;
	font-style: normal;
}

images 만 추가되었습니다. 나중에 코드 전부를 보시면 이해가 가실겁니다.
여기서는 @font-face 를 선택해서 적용하는 방법을 참고하시면 됩니다.

font-family: 'SymbolSignsBasisset'; 로 설정된것이 보이지요.

그다음 :before 를 이용해서 앞 공간에 아이콘이 삽입되도록 해보겠습니다.

.button:before {
	font-family: SymbolSignsBasisset;
	content: 'D';
	color: #333;
	font-size: 90px;
	line-height: 70px;
	float: left;
	margin-left: 35px;
	margin-right: -40px;
	text-shadow: 1px 1px 0 #fff;
}

이걸로 모든 작업은 끝입니다.
여기서 보시면 content: 'D'; 라는 부분이 보일겁니다. D 가 아래로 향하는 화살표 모양이 되는겁니다.
line-height 로 적당이 자리도 잡아주었습니다.

아래에 코드 전부가 있습니다. 그대로 복사해서 html 파일 하나 만들어서 실행해보세요.

html 코드 전문

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS3 Buttons</title>
	<style>

/* CUSTOM FONT | http://www.fontsquirrel.com/fontfacedemo/Symbol-Signs */
@font-face {
	font-family: 'SymbolSignsBasisset';
	src: url('images/symbol-signs-webfont.eot');
	src: url('images/symbol-signs-webfont.eot?#iefix') format('embedded-opentype'),
		 url('images/symbol-signs-webfont.woff') format('woff'),
		 url('images/symbol-signs-webfont.ttf') format('truetype'),
		 url('images/symbol-signs-webfont.svg#SymbolSignsBasisset') format('svg');
	font-weight: normal;
	font-style: normal;
}

body {
	width: 500px;
	margin: 200px auto;
	background: #666;
}

.button {
	width: 450px;
	height: 100px;
	line-height: 100px;
	color: #333;
	text-decoration: none;
	font-size: 60px;
	font-family: helvetica, arial;
	font-weight: bold;
	display: block;
	text-align: center;
	position: relative;

	/* BACKGROUND GRADIENTS */
	background: #CCCCCC; /* Old browsers */
	background: -moz-linear-gradient(top,  #CCCCCC 0%, #666666 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CCCCCC), color-stop(100%,#666666)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* IE10+ */
	background: linear-gradient(top,  #CCCCCC 0%,#666666 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#CCCCCC', endColorstr='#666666',GradientType=0 ); /* IE6-8 */

	/* BORDER RADIUS */
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;

	border: 1px solid #CCCCCC;
	border-top: 1px solid #F5F5F5;

	/* TEXT SHADOW  */
	text-shadow: 1px 1px 0 #fff;

	/* BOX SHADOW */
	-moz-box-shadow: 0 1px 3px black;
	-webkit-box-shadow: 0 1px 3px black;
	box-shadow: 0 1px 3px black;
}

/* WHILE HOVERED */
.button:hover {
	background: #AAAAAA; /* Old browsers */
	background: -moz-linear-gradient(top,  #AAAAAA 0%, #444444 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#AAAAAA), color-stop(100%,#444444)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* IE10+ */
	background: linear-gradient(top,  #AAAAAA 0%,#444444 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AAAAAA', endColorstr='#444444',GradientType=0 ); /* IE6-8 */
}

/* WHILE BEING CLICKED */
.button:active {
	-moz-box-shadow: 0 2px 6px black;
	-webkit-box-shadow: 0 2px 6px black;
}

/* FONT GLYPH (MOSTLY FOR FUN) */
.button:before {
	font-family: SymbolSignsBasisset;
	content: 'D';
	color: #333;
	font-size: 90px;
	line-height: 70px;
	float: left;
	margin-left: 35px;
	margin-right: -40px;
	text-shadow: 1px 1px 0 #fff;
}

	</style>
</head>
<body>
     <a href="#" class="button"> Download </a>
</body>
</html>

여기서 활용도 가능합니다.

Download 라고 마크업하고 아래로 향하는 아이콘만 삽입했는데 아래처럼 content 부분만 추가해서 사용할 수 있습니다.
아래 이미지를 보시면 email 을 사용하려고 하나더 추가한 것입니다.

그럼 아래처럼 보여집니다. 마우스를 갖다대었을 경우 즉 hover 의 경우도 같이 한번 보여드릴게요.

email 이 추가된것이 보이지요. 약간 위로 올라간듯 하네요. 이것도 line-height 를 약간 수정해주면 됩니다.
http://www.fontsquirrel.com/fontface 에 보시면 다양한 모양과 글꼴이 있습니다. 단순이 선택해서 다운로드 받아서 사용하기만 하면 됩니다.위에 예제로 만든 html 파일 첨부합니다.
브라우져로 실행해보세요....

font_test.rar

개 개

demun(대문블로그)

@font-face kits를 이용하여 버튼 아이콘 만들기-고급팁

티스토리툴바