Выложите код с проблемой в песочницу jsfiddle.net
Видимо, ошибка в коде или стили перебивают друг друга. Чтобы сказать почему, нужно видеть как вы пишете.
И попробуйте обойтись селекторами с двойной максимальной вложенностью.
Например, для иконок большего размера достаточно написать .fa-2x {}
а не всю вон ту гармошку
Простейшая реализация: https://jsfiddle.net/fjq934vc/
Дальше можно менять свои эффекты поведения.
Класс можно менять как у меню и кнопки, так и у их общего родителя в зависимости от макета.
Вы делаете кружки абсолютами, которые вываливаются из span'а и кнопки.
Значит, нужно либо перестать их так делать либо задать кнопке ширину.
Либо компенсировать отступами.
Я бы делала кружки либо градиентами либо тоже SVG. Поскольку, остальные кнопки SVG, то и эту разумнее тоже.
При этом нужно, чтобы он находился в одной обертке, которая является display: inline-block, строки текста нельзя ни во что обернуть и [br] тоже использовать не вариант.
Откуда взялись все эти условия?
Теоретически, если вы зададите 100500 теней, то проблемы останутся только для краев )))))
