Значок Font Awesome не отображается в фиксированной нижней части на мобильном устройстве. Ширина 320 пикселей. ⇐ CSS

[Anonymous]

У меня возникла проблема: значок Font Awesome не отображается должным образом на мобильном устройстве с шириной экрана 320 пикселей. Я использую Bootstrap для макета и Font Awesome для значков. Проблема конкретно возникает со значком учетной записи на моей фиксированной нижней панели навигации.
При доступе к веб-сайту на мобильном устройстве с шириной экрана 320 пикселей отображается только половина значка учетной записи. Эта проблема возникает с этим конкретным значком, так как другие значки отображаются без проблем. Попыталась использовать разные классы значков Font Awesome для значка учетной записи, но проблема не решена.
Как решить эту проблему?

Код: Выделить всё

.fixed-bottom-section {
position: fixed;
bottom: 0;
width: 100%;
background-color: white;
z-index: 1000;
box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
}
.fixed-bottom-section .my_icons {
margin-left: -35px;
}
.fixed-bottom-section .my_icons a:hover {
color: #007bff;
}
.my_icons a {
color: black;
font-size: 14px;
text-decoration: none;
}
.my_icons a:hover {
color: #007bff;
text-decoration: none;
}
.my_icons i {
font-size: 20px;
display: block;
margin-bottom: 5px;
}
.my_icons p {
margin: 0;
font-size: 12px;
}

Код: Выделить всё

        








[url=#]
[i][/i]
Home
[/url]
[url={% url ]
[i][/i]
Transaction
[/url]
[url={% url ]
[i][/i]
History
[/url]
[url=#]
[i][/i]
Fund
[/url]
[url={% url ]
[i][/i]
Account
[/url]

Подробнее здесь: https://stackoverflow.com/questions/793 ... vice-320px