replace icons in header with icon font

4 files changed, 34 insertions, 15 deletions

diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss
index ecc5fa3..ae19807 100644
--- a/sass/parts/_header.scss
+++ b/sass/parts/_header.scss
@@ -54,18 +54,21 @@ $header-height: 30px;
 				}
 			}
 			>a{
-				padding: 38px 30px 38px 0;
+				padding: 38px 0;
 				margin-top: -38px;
-				background: image-url('detail.png') right center no-repeat;
-				@media screen and (max-width: 1040px){
-					padding: 18px 30px 18px 0;
-					&:only-child{
-						padding-right: 0;
-					}
+				&:after{
+					content: "\f078";
+					color: $color-gray03;
+					font: 12px $font-icon;
+					padding-left: 10px;
 				}
 				&:only-child{
-					padding-right: 0;
-					background: none;
+					&:after{
+						content: "";
+					}
+				}
+				@media screen and (max-width: 1040px){
+					padding: 18px 0;
 				}
 			}
 		}
@@ -102,15 +105,21 @@ $header-height: 30px;
 					border-bottom: none;
 				}
 				>a{
-					background: image-url('detail-sub.png') right center no-repeat;
 					display: block;
-					padding: 5px 30px 5px 15px;
+					padding: 5px 15px;
+					&:after{
+						content: "\f054";
+						color: $color-gray02;
+						font: 12px $font-icon;
+						padding-left: 10px;
+					}
 					&:hover{
 						color: $color-gray01;
 					}
 					&:only-child{
-						background: none;
-						padding-right: 15px;
+						&:after{
+							content: "";
+						}
 					}
 				}
 			}
@@ -256,12 +265,22 @@ $header-height: 30px;
 	.search{
 		float: left;
 		margin-top: 1px;
+		position: relative;
 		@media screen and (max-width: 1040px){
 			float: none;
 			margin-top: 15px;
 		}
+		&:before{
+			content: "\f002";
+			color: $color-gray03;
+			font: 18px $font-icon;
+			line-height: 30px;
+			position: absolute;
+			top: 0;
+			right: 125px;
+		}
 		input[type="text"]{
-			background: image-url('search.png') 10px center no-repeat #f2f2f2;
+			background: #f2f2f2;
 			color: $color-gray02;
 			border: 1px solid $color-gray04;
 			font: 13px $font-default;
@@ -270,7 +289,7 @@ $header-height: 30px;
 			@include transition(0.3s);
 			@include border-radius(15px);
 			&:focus, &:active{
-				background: image-url('search.png') 10px center no-repeat #fff;
+				background: #fff;
 				border-top: 1px solid $color-gray03;
 				color: $color-gray01;
 				outline: none;
diff --git a/source/images/detail-sub.png b/source/images/detail-sub.png
deleted file mode 100644
index d03180a..0000000
--- a/source/images/detail-sub.png
+++ /dev/null
diff --git a/source/images/detail.png b/source/images/detail.png
deleted file mode 100644
index 9093a61..0000000
--- a/source/images/detail.png
+++ /dev/null
diff --git a/source/images/search.png b/source/images/search.png
deleted file mode 100644
index 90a3af2..0000000
--- a/source/images/search.png
+++ /dev/null