iBird Rose

да. это самый нормальный способ.
также можно ставить через before к примеру для li. но тогда придется самому стили указывать для нужной иконки. а не через классы

ну тк повесь на change по чекбоксу https://jsfiddle.net/qdz7suko/2/
p.s. вообще такое можно сдеать без js. https://jsfiddle.net/qdz7suko/3/

https://www.youtube.com/watch?v=k3yRfEw1pYk&list=P...
https://www.youtube.com/watch?v=O9p4dRBRSXE&list=P...

если ты подключаешь стили свои после бутсраповских и задаешь те же пути как и у бутстрапа (когда переопределяешь) - никаких important не нужно.

https://jsfiddle.net/0fbku3nx/

https://jsfiddle.net/td81zapz/1/
float: left; забыл?

у тебя на активном пункте меню висит класс .current-menu-item
по нему и задавай

nav li.current-menu-item a {
      background-color:black;
      color:white;
  }

измменить position: absolute у .prices-slider на fixed и задать ему height: 100%;

.prices-slider {
    height: 100%;
    position: fixed;
}

Или есть какой-то подвох?

ну тк прочитай про свойство overflow: hidden. для чего он изначально предназначен. тогда сам увидишь подвох) тобишь ничего за грани этого элемента ты не сможешь вынести абсолютом к примеру.

p.s. а так метод рабочий да. как сам написал "меньше кода и т.д.", но если нужно чтобы что то выходило за рамки контейнера - этот метод отпадает.

если ставишь display: inline-block - никогда не забывай про vertical-align
в твоем случае надо:

.footer-block li {
    display: inline-block;
    vertical-align: top;
    width: 22%;
}

навесь на кнопки переключения обновление слайдера

$('.index-page-menu ul li a').on('click', function() {
	$('.products-slider').slick('setPosition');
});

делаешь все шрифты на сайте через em. а у body - через px. потом при уменьшении экрана - меняешь у body font-size. итого шрифты будут уменьшаться везде.

https://jsfiddle.net/NsRwa/8/