Using font-awesome icons with Video.js?

Question

I am trying to use video.js which is awesome, and it uses a custom icon font for the interface.

However I need a few more icons, we already use font-awesome on our site, so thought it would be great if we could just use those icons, and since the video.js already uses a custom icon font I thought it should be easy.

So, I added a custom button:

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);

};

and tried replacing vjs-quickclip-control with icon icon-crop which partially works.

The little highlighted button is the output.

So, this obviously didn't work, so now I am wondering, how can I do this?

I tried to create a JS fiddle but it doesn't seem to load properly...

Answer 1

Ah, got it,

for my new links I use

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