아래와 같은 탭메뉴 소스를 사용중입니다.

<style>

... 생략....

.tab-nav-link {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 2.88;
    letter-spacing: -0.09px;
    text-align: center;
    color: #1f2949;
}

.tab-horizontal .tab-nav-item {
    margin: 0px 28px;
}

.tab-nav-link.active {
    color: #0352cc;
}

... 생략....

</style>

        <ul class="tab-nav nav nav-tabs">
          <li class="tab-nav-item"><a class="tab-nav-link active"  data-toggle="tab" href="#tab-1">Tab 1</a></li>
          <li class="tab-nav-item"><a class="tab-nav-link" data-toggle="tab" href="#tab-2">Tab 2</a></li>
          <li class="tab-nav-item"><a class="tab-nav-link" data-toggle="tab" href="#tab-3">Tab 3</a></li>
          <li class="tab-nav-item"><a class="tab-nav-link" data-toggle="tab" href="#tab-4">Tab 4</a></li>         </ul>

위의 소스에서는 스타일의 active 값으로 선택된 항목을 표시하고 있는데요.

텍스트가 아닌 이미지 버튼을 넣어서 사용하고,

선택되었을때와 선택되지 않았을때의 이미지를 다르게 표시하는 방법으로 수정하고 싶은데요.

어떻게 하면 될까요?

즉, 위의 Tab1 ~ Tab4 까지의 텍스트 대신에

tab1.png ~ tab4.png 까지의 이미지로 표시하고

tab1_active.png 를 만들어서 tab1 이 선택되면 tab1_active.png 가 보이도록 하고 싶습니다.

위의 소스를 어떻게 수정하면 될까요?