Виталий Бобров

Лутше 1

Для начала попробуйте обходится без бутстрапа что бы научится css )

Для начала сжать картинки и возможно заюзать webp для браузеров которые его понимают.
Еще бы в 2016-м году неплохо делать риспонсив, и в таком случае воспользоватся елементом picture для предоставления картинок под разные разрешения екрана.

Посмотри на Ionic Framework - на хабре есть немного статей о нем.

а в самом шрифте символ присутсвует ?

Вобщем то все в полне логично - блок с градиетом у вас в DOM идет после блока с контентом слайда и имеет абсолютное позиционирование, а контент слайда идет выше - соответственно блок с градиентом имеет больший z-index.
Вам следует разобраться с z-index для етих елементов.

возможно включение сглаживания поможет
-webkit-font-smoothing: antialiased;
а вобще каждый браузер рендерет их по-своему

Посмотрите в сторону вот етого цсс свойства htmlbook.ru/css/border-image
позволит поставить заготовленую картинку для бордера и растягивать ее по периметру, единственное прийдеться отказаться от древних браузеров типа ИЕ8

прямее правки css, а в случае с бутстрапом less или sass нету) ищите input-ы и их свойства border-radius и linear-gradient

для начала стоит ознакомиться с основными концепциями RWD и узичить медиа запросы