更改按鈕的內容字體字體真棒圖標

我有裏面包含在他們裏面字體真棒圖標操作按鈕，一個劍道網格。我想要做的是更改按鈕文本的字體。但是，當你改變字體，它會覆蓋字體真棒和圖標不顯示（僅空心方塊顯示代替，這是預期的行爲）。更改按鈕的內容字體字體真棒圖標

生成的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這是實際的字體真棒元素。

這裏有一個fiddle嘗試。

來源

2017-01-13 Chris

您是否嘗試過使用：不（）的CSS命令。 [看看這個]（https://developer.mozilla.org/en/docs/Web/CSS/:not） – Sphinx

歡迎你。不過，我仍然會建議其他解決方案，因爲它是根據Font-awesome規範最爲接受的解決方案。您也不需要爲每個按鈕添加CSS。一個修復所有。 – Sphinx

的問題是，由劍道UI生成此HTML元素我使用的，而不是我。所以我不得不重寫CSS規則，而不是改變DOM結構。

我解決了容易使用這個CSS規則的問題：

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

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

來源

2017-01-13 09:38:46 Chris

我會根據websites example添加字體真棒圖標。在<a>標記內的<i>標記中。這樣，<a>標籤的字體系列不受影響。

查看更新fiddle

來源

2017-01-13 09:36:08 Sphinx

我明白你的想法，但我無法改變DOM，因爲它是由Kendo UI生成的 – Chris

更改按鈕的內容字體字體真棒圖標

回答

相關問題