https://davist11.github.io/jQuery-One-Page-Nav/ меню справа вверху. Вместо надписей делаем как на скрине, а при изменении класса меняем бекграунд. В бутстрепе, если что, есть такая же фича, искать в документах лениво
Это больше вопрос предпочтения. В HTML предпочитаю двойные, в js одинарные, или апострофы. Если JS в старом синтаксисе, то может использоваться и то и другое, как например:
var newVal = '<div class="val-class">' + val + '</div>';
"Окружить" инпут див-ом и впихнуть рядом, либо стилизировать сам инпут, а иконку воткнуть через псевдо-селектор after/before. вот пример первого варианта https://codepen.io/anon/pen/ewowRL
.my-class {
background-image: url('path/to/your/image');
background-repeat: no-repeat;
background-position-x: 50%; /* <-- тут подставить свои координаты, на сколько изо сдвинуть по оси Х*/
background-position-y: 50%; /* <-- то же самое, но по оси У */
}