Как создать переход между двумя разными значками шрифтов Awesome? ⇐ CSS

[Anonymous]

У меня есть эта кнопка в HTML:

Код: Выделить всё

[i][/i]
[i][/i]

Это часть складной боковой панели, которую я создал с помощью Bootstrap (официально называемой offcanvas). Когда я наведу на это курсор мыши, я хочу, чтобы значок "sidebar-toggle-default" сменился на значок "sidebar-toggle-active".
Я нашел ветку, в которой говорится, что это можно сделать с помощью только CSS, но эффект слишком сложен для того, что я пытаюсь сделать, и я тоже не могу воспроизвести его в своем собственном коде.
Мне нужна очень простая анимация. Значок по умолчанию представляет собой три полоски, расположенные вертикально, и «активный» значок под ним такой же, но средняя полоса имеет небольшое смещение относительно остальных. Когда я навожу курсор на значки, я хочу, чтобы переход выглядел так, будто средняя полоса выдвинута вперед. Есть ли способ добиться этого?


Подробнее здесь: https://stackoverflow.com/questions/786 ... some-icons