javascript - 在 Video.js 中使用 Font Awesome 图标？

Question

我正在尝试使用很棒的 video.js，它为界面使用了自定义图标字体。

但是我还需要一些图标，我们已经在我们的网站上使用了很棒的字体，所以我认为如果我们可以只使用这些图标会很棒，而且由于 video.js 已经使用了自定义图标字体，我认为它应该很容易。

所以，我添加了一个自定义按钮:

vjs.QuickClip = vjs.Button.extend({
    /** @constructor */
    init: function (player, options) {
        vjs.Button.call(this, player, options);
    }
});

vjs.QuickClip.prototype.buttonText = 'Quick Clip';

vjs.QuickClip.prototype.buildCSSClass = function () {
    return 'vjs-quickclip-control ' + vjs.Button.prototype.buildCSSClass.call(this);
};

vjs.QuickClip.prototype.onClick = function () {

    var offset = 10;
    var time = this.player_.currentTime();
    var clipStart = time < 10 ? 0 : time - 10;
    var clipEnd = time + offset > this.player_.duration() ? this.player_.duration() : time + offset;
    console.log('Clipped at ' + time + ' so from ' + clipStart + ' to ' + clipEnd);

};

并尝试将 vjs-quickclip-control 替换为部分有效的 icon icon-crop。

突出显示的小按钮是输出。

所以，这显然行不通，所以现在我想知道，我该怎么做？

我尝试创建一个 JS fiddle ，但它似乎无法正确加载...

Answer 1

啊，明白了，

我使用的新链接

.vjs-default-skin .vjs-control.vjs-quickclip-control:before {
    font-family: FontAwesome;
    content:"\f125";
}