css ::before 속성으로 아이콘 넣는 방법

버튼이나, 텍스트 그리고 리스트 앞 쪽에 아이콘을 넣는 경우 자주 쓰는 방식

일단 버튼에 넣는 것을 예시로 진행한다.

<button class="icon-btn">button</button>

.icon-btn{
	line-height:24px;
	font-size:16px;
	border:none; 
	background: transparent;
	/* button 속성은 기본적으로 제공하는 border와 background 속성이 있어서 제외하고 사용하는 것이 일반적이다. */
}

/*
	* https://cdn-icons-png.freepik.com/256/1296/1296698.png
	* 아이콘 이미지는 임의로 웹 이미지를 사용한다. 
	* 직접 구현할 경우 css 내부에 이미지 경로를 입력하여 사용하면 된다. 
*/

 

우선 아이콘을 넣는 부분을 정사각형으로 정하고, padding 사이즈는 텍스트의 줄간격을 참고하여 진행한다.

line-height: 24px 일 경우 아이콘 영역의 크기를 widtn:24px, height:24px 로 하는 것을 추천한다.

그리고 텍스트와의 간격을 감안하여 padding-left 사이즈를 정한다.

ex : 아이콘이 24px 정사각형이고 text와의 간격을 20px로 할 경우 padding-left: 24px + 20px 로 한다.

.icon-btn{
	line-height:24px;
	font-size:16px;
	border:none; 
	background: transparent;
	padding-left:44px;
}

/*
	* https://cdn-icons-png.freepik.com/256/1296/1296698.png
	* 아이콘 이미지는 임의로 웹 이미지를 사용한다. 
	* 직접 구현할 경우 css 내부에 이미지 경로를 입력하여 사용하면 된다. 
*/

 

:before 속성을 absolute 로 적용 시킬 예정이라 button의 position을 realtive 로 정의한다.

.icon-btn{
	line-height:24px;
	font-size:16px;
	border:none; 
	background: transparent;
	padding-left:44px;
	position:relative;
}

/*
	* https://cdn-icons-png.freepik.com/256/1296/1296698.png
	* 아이콘 이미지는 임의로 웹 이미지를 사용한다. 
	* 직접 구현할 경우 css 내부에 이미지 경로를 입력하여 사용하면 된다. 
*/

 

그리고 아이콘을 배경으로 넣을 before 영역을 정의한다.

.icon-btn{
	line-height:24px;
	font-size:16px;
	border:none; 
	background: transparent;
	padding-left:44px;
	position:relative;
}

.icon-btn::before{
	content:"";
	width:24px;
	height:24px;
	background-color:#222;
	position:absolute;
	left:0px;
	top:0px;
}

/*
	* https://cdn-icons-png.freepik.com/256/1296/1296698.png
	* 아이콘 이미지는 임의로 웹 이미지를 사용한다. 
	* 직접 구현할 경우 css 내부에 이미지 경로를 입력하여 사용하면 된다. 
*/

 

이렇게 설정하면,

이렇게 button 왼쪽으로 검정 box가 위치하게 된다.

해당 영역에 알맞게 배경이미지를 넣어 아이콘 형태로 사용한다.

.icon-btn{
	line-height:24px;
	font-size:16px;
	border:none; 
	background: transparent;
	padding-left:44px;
	position:relative;
}

.icon-btn::before{
	content:"";
	width:24px;
	height:24px;
	background-image:url(https://cdn-icons-png.freepik.com/256/1296/1296698.png);
	background-size:20px auto;
	background-repeat:no-repeat;
	background-position:center center;
	position:absolute;
	left:0px;
	top:0px;
}

/*
	* https://cdn-icons-png.freepik.com/256/1296/1296698.png
	* 아이콘 이미지는 임의로 웹 이미지를 사용한다. 
	* 직접 구현할 경우 css 내부에 이미지 경로를 입력하여 사용하면 된다. 
*/

 

이 방식을 class로 구분하면 button에 class를 추가하면서 아이콘을 정의할 수 있다.

 

반응형