Отсутствует необходимость CSS быть исправлены

Question

вчера я реализовал свой проект здесь: https://jsfiddle.net/8f3vLh0a/17/

Он использует шрифт удивительный по своей конструкции. Теперь моя проблема в том, что, когда я удалить старые иконки пролетных ж/с являются изображения, используя следующую строку кода:

<span class="icon home "></span> 

Это будет фактически уничтожить расстояние от шрифта удивительных икон, как видно на этой версии: https://jsfiddle.net/7869qLmx/1/

Он должен быть центрирован на экране. Как мне это сделать? с каким CSS я должен двигаться?

вот мой текущий JSFIDDLE Версия: https://jsfiddle.net/7869qLmx/1/

Answer 1

Я думаю, это потому, что маржа в классе i.fa

i.fa { 
    position:absolute; 
    pointer-events:none; 
    color:white ; 
    top: 50%; 
    left: 50%; 
    margin-top: -45px; 
    margin-left: -45px; 
} 

Я обновил в моей скрипкой.

Проверьте это https://jsfiddle.net/sesn/7869qLmx/3/

Answer 2

Попробуйте изменить окраину i.fs класса

i.fa { 
    position:absolute; 
    pointer-events:none; 
    color:white ; 
    margin:16px 0 0 14px; 

} 

Вот что jsfiddle https://jsfiddle.net/7869qLmx/4/

Answer 3

Изображения используются в качестве шрифта. Таким образом, размер шрифта отсутствует на теле. Добавить к вашему коду css
тело {font-size: 14px; } И размер изображений будет слишком правильным.

body { font-size : 14px; }