当它包含font-awesome图标时更改按钮的内容字体

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>

我将分享一下Chrome工具内部的图像： 我的问题是如何只覆盖按钮的内容字体，而不是::before，它是实际的 font-awesome 元素。

这是一个fiddle来试试。

Answer 1

问题是这个html元素是由我使用的Kendo UI生成的，而不是由我生成的。所以我不得不重写css规则，而不是改变DOM结构。

我使用这些css规则轻松解决了这个问题：

class BannerCollectionViewCell: UICollectionViewCell {

    @IBOutlet weak var bannerImageView: UIImageView!

}

Answer 2

我会根据websites example添加字体真棒图标。在<i>标记内的<a>标记中。这样<a>标记的字体系列就不会受到影响。

查看更新的fiddle