Изменить шрифт содержимого кнопки, когда он содержит шрифт-удивительный значок

Question

У меня есть Kendo сетка с кнопками действий внутри, которая содержит font-awesome иконки внутри них. Я хочу, чтобы изменить шрифт текста кнопки. Но когда вы меняете шрифт, он переопределяет font-awesome, и значки не отображаются (вместо этого показаны только пустые квадраты, что является ожидаемым поведением).

Сгенерированный HTML является:

<a class="k-button k-button-icontext action-btn fa fa-pencil-square-o k-grid-Edit" href="#" style="font-family: 'Montserrat', sans-serif;"> 
    <span class=" "></span>Edit 
</a> 

Я буду делить образ того, как он выглядит внутри хромированных инструментов: Мой вопрос заключается в том, как я переопределить только шрифт баттона контента, а не ::before, который является фактическим font-awesome элемент.

Вот fiddle, чтобы попробовать.

Answer 1

Проблема заключалась в том, что этот HTML элемент был сгенерирован Кендо UI Я использую, не мной. Поэтому мне пришлось переопределить правила css вместо изменения структуры DOM.

Я решил проблему легко, используя этот CSS правила:

.k-button.fa::before{ 
    font-family: 'FontAwesome'; 
} 

.k-button{ 
    font-family: 'Montserrat', sans-serif; 
} 

Answer 2

Я бы добавил шрифт awesome icons в соответствии с websites example. В теге <i> в теге <a>. Таким образом, не изменяется шрифт-семейство тега <a>.

Смотрите обновленный fiddle