.dropdown .open .fa.fa-minus 
Это поведение соответствует стандарту. Оно существует, в первую очередь, для совместимости, как осколок далёкого прошлого и не очень приветствуется, поскольку использует глобальные переменные. Браузер пытается помочь нам, смешивая пространства имён JS и DOM, но при этом возможны конфликты.
<button id="okay">, то на него можно сослаться с помощью глобальной переменной "okay". ©Дэвид Флэнаган. 
.sprite{ /* Картинки должны быть одинаковой размерности */
background: url(/img/spritesheet.png) no-repeat; /* ваш спрайт */
width: 278px; /* ширина одной картинка */
height: 189px; /* высота одной картинки */
}
.sprite.pig{
background-position: 0px 0px; /* допустим это первая картинка и у вас нет отступов слева ( т.е картинка начинается сразу) */
}
.sprite.fish{
background-position: -278px 0px; /* Следующая картинка справа на той же полосе (если я не ошибаюсь, но принцип такой) */
}<div class="sprite pig"><div>
<div class="sprite fish"><div>