Отображение глиф-иконок на странице

На сайте есть два вида отображения элементов: в виде таблицы и сетки, которые меняют отображение в зависимости от клика по кнопке.

На странице имеется кнопка . При переключении она меняется на такую (цвет не принципиален), где вместо глиф-иконки выводится .

Стили с текстом у обеих кнопок задаются через :before {content:"";}:

.archive .product-actions .compare:before {
    content: "Сравнить \f200";
    font-size: 14px;
    padding: 10px;
}

Плюс у второй кнопки есть стили:

.view-grid-center .product-frame .product-actions .compare:before {
    position: relative;
    padding: 0;
    border: none;
}

Почему так получается?