Сергей Мельников

Это нормально и стоит так делать. А в чем, собственно, может быть проблема? И если "На многих сайтах сейчас вставляют тег i для иконок..." то наверное это нормально? Учимся размышлять логически и перенимать чужой опыт.

никак, ловить клик на сам спан

getbootstrap.com/components/#navbar
пример

jsbin.com/hitij/1

В смысле не работает? Отрисовывается другой шрифт или отрисовывается не так, как хотелось бы?

использовать таблицу

codepen.io/anon/pen/yjpzm

jsfiddle.net/Zvyxd/10

<meta name="viewport" content="width=device-width, initial-scale=1">

<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.liFixar.js"></script> 
<script src="js/main.js"></script>

Правильно заданный вопрос содержит в себе три четверти ответа.
Попробуйте задать вопрос еще раз.

Насколько мне известно, нет.
Такое возможно сделать только при однородном повторяющемся фоне.
Или, если верхняя часть - это полупрозрачная пнг, сквозь которую видно основной фон, тогда можно заморочится)

#my_block {
  position: absolute;
  left: 50%;
  margin-left: -150px; /* половина ширины блока, который центрируем */
}

задавать стили js - это говнокод, за такое по рукам сильно бьют. Все стили должны быть в css! при помощи js меняем только классы