Обрезается иконка

[alexakap]

Всем привет, 2 дня не могу решить проблему - обрезается последняя иконка кнопки поделиться


HTML

Код Выделить Развернуть

<!--поделиться-->
<div class="topic-icons">
<a href="#"><span class="icon-facebook"></span></a>
<a href="#"><span class="icon-vkontakte-1"></span></a>
<a href="#"><span class="icon-twitter"></span></a>
<a href="#"><span class="icon-gplus"></span></a>
<a href="#"><span class="icon-odnoklassniki"></span></a>
<a href="#"><span class="icon-paper-plane"></span></a>
</div>
<!--поделиться-->

CSS

.topic-icons { margin: 10px; float: left; box-sizing: border-box; }
/* Body Icons */
a span.icon-facebook { border-color: #4d68a2; color: #4d68a2; margin-left: 3px; padding: 3px; border: 2px solid #4d68a2;; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-facebook:hover { color: #fff; background-color: #4d68a2; margin-left: 3px; padding: 3px; border: 2px solid #4d68a2;; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-gplus { border-color: #dd4b39; color: #dd4b39; margin-left: 3px; padding: 3px; border: 2px solid #dd4b39; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-gplus:hover { color: #fff; background-color: #dd4b39; margin-left: 3px; padding: 3px; border: 2px solid #dd4b39; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-twitter { border-color: #55acee; color: #55acee; margin-left: 3px; padding: 3px; border: 2px solid #55acee; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-twitter:hover { color: #fff; background-color: #55acee; margin-left: 3px; padding: 3px; border: 2px solid #55acee; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-vkontakte-1 { border-color: #597b9f; color: #597b9f; margin-left: 3px; padding: 3px; border: 2px solid #597b9f; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-vkontakte-1:hover { color: #fff; background-color: #597b9f; margin-left: 3px; padding: 3px; border: 2px solid #597b9f; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-odnoklassniki { border-color: #f2720c; color: #f2720c; margin-left: 3px; padding: 3px; border: 2px solid #f2720c; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-odnoklassniki:hover { color: #fff; background-color: #f2720c; margin-left: 3px; padding: 3px; border: 2px solid #f2720c; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-paper-plane { border-color: #0088cc; color: #0088cc; margin-left: 3px; padding: 3px; border: 2px solid #0088cc; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }
a span.icon-paper-plane:hover { color: #fff; background-color: #0088cc; margin-left: 3px; padding: 3px; border: 2px solid #0088cc; border-radius: 5px; transition: color 0s ease 0s; -webkit-transition: color 0s ease 0s; }

Буду рад любой подсказке

[Fullf]

Лучше ссылку на сайт дайте

[alexakap]

Лучше ссылку на сайт дайте

Сайт на локалке

[Андрей88]

1. Совет первый, если нет сайта весь код бросайте в песочнице!
2. Что здесь можно понять? [spoiler]https://jsfiddle.net/9ha3tLyf/[/spoiler]

[alexakap]

1. Совет первый, если нет сайта весь код бросайте в песочнице!
2. Что здесь можно понять? [spoiler]https://jsfiddle.net/9ha3tLyf/[/spoiler]

Что здесь можно не понять? Иконки fontawesome, в css прописаны только бордеры, код выше, других стилей вообще нет и как бы резать иконку нечему, но она режется
Впрочем, велосипед уже решил проблему
Добавлено: 08-11-2018, 20:30:09

Если кому интересно, поставил оригинальные fontawesome и все заработало. Проблема только с иконками с fontello.com. Странно, на многие сайты раньше без проблем ставил