[CSS] background 로 아이콘 넣기

<div class="downloadBtn">
	<a href="#" target="_blank" class=" search" data-name="텍스트1"></a>
</div>

a태그에 data-name을 넣어 글씨를 제어하고자 한다면, 아래와 같이 가상클래스를 통해 attr(내가 지어준 data값)에 접근

.downloadBtn a:before {
    content: attr(data-name);
    padding-left: 14px;
    display: flex;
    height: 100%;
    color: #fff;
    align-items: center;
    pointer-events: none;
}

 

search에 아이콘을 background img로 넣어 위치값을 조정하고자 한다면 아래와 같이 단축속성을 적용할 수 있다.

.worksheet .search {
    background: #ae7c65 url() 15px center/22px auto no-repeat;
}

/* contents색상 | url 경로 | 이미지의 위치조정/width값 | 이미지의 너비 | 반복유무 */

center/22px -> center, top 등 position 이 된다.