更改按钮的内容字体字体真棒图标

我有里面包含在他们里面字体真棒图标操作按钮，一个剑道网格。我想要做的是更改按钮文本的字体。但是，当你改变字体，它会覆盖字体真棒和图标不显示（仅空心方块显示代替，这是预期的行为）。更改按钮的内容字体字体真棒图标

生成的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

更改按钮的内容字体字体真棒图标

回答

相关问题