フォントの素晴らしいフォントが含まれている場合、ボタンのコンテンツフォントを変更する

Question

剣道グリッド内にアクションボタンが含まれており、その中に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

を更新参照してください。そこで、DOMの構造を変更するのではなく、CSSルールをオーバーライドする必要がありました。

私はこのCSSルールを使用して簡単に問題を解決：ない（）CSSコマンド：

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

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

Answer 2

websites exampleのようにすばらしいアイコンを追加します。 <a>タグ内の<i>タグ内。そうすれば、<a>タグのfont-familyは影響を受けません。

は、問題は、このhtml要素は、私はない私が、使用しています剣道UIによって生成されたことだったfiddle