CSS-спрайты -использование только одного фрагмента изображения в качестве фона для части элемента

Я использую Технику CSS Sprite с фоновым изображением, которое выглядит примерно так:

Код CSS для значки:

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

Мои значки можно использовать вот так:

Я хочу поместить какой-нибудь текст внутри своих значков, например:

There is a warning on this page

Но проблема в том, что фоновое изображение закрывает всю текстовую область:

Вопрос :как я могу использовать только часть изображения в качестве фонового изображения для части моего элемента?

Примечания:

• установка widthна 16pxдля div.iconне помогает.