Как поставить 2 иконки Font Awesome применительно к одному объекту?

Question

[demidov_grinch]

Добрый день, уважаемые господа!
Как поставить 2 иконки Font Awesome применительно к одному объекту? Объект - кнопка меню, имеющая два класса: menu-item и menu-item2.
Использую код:

.menu-item:before {
    content: "\f04d";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #cf142b;
    font-size: 8px;
    padding-right: 0.5em;
    position: absolute;
    top: 14px;
    left: 5px;
}

.menu-item2:before {
    content: "\f0d7";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #cf142b;
    font-size: 8px;
    padding-right: 0.5em;
    position: absolute;
    top: 14px;
    right: 5px;
}

Спасибо заранее!

Answer 1

[Сергей Горячев]

И что не так?
Как сейчас показывается? Как должно быть?
Битва экстрасенсов на тут не проходит.

У любого дива есть 2 псевдоэлемента - before (до) и after (после). Что еще нужно?

Comments

[demidov_grinch]

Обе иконки наезжают друг на друга и становятся почти по центру блока.

[demidov_grinch]

Должно быть, что одна иконка слева блока, друга справой его части.

[Сергей Горячев]

demidov_grinch: У любого дива есть 2 псевдоэлемента - before (до) и after (после). Что еще нужно?

[Степан Крапивин]

demidov_grinch: значит для одной иконки используй :before, для другой :after

[Сергей Горячев]

demidov_grinch: Наезжают друг на друга, потому что абсолютно позиционированы.
Если не сделаешь нормальный фиддл в песочнице, код писать за тебя никто не будет.

[demidov_grinch]

Да, before и after! Это гениально! Спасибо, Сергей!!!