hallysonh / ngx-imageviewer

Angular 5 Image Viewer Component based on Canvas
MIT License
84 stars 52 forks source link

Using Font Awesome Icons config... what am I doing wrong? #53

Open bb1 opened 5 years ago

bb1 commented 5 years ago
const IMAGEVIEWER_CONFIG_DEFAULT: ImageViewerConfig = {
    buttonStyle: {
        iconFontFamily: 'FontAwesome', // font used to render the button icons
    },
    zoomOutButton: {
        icon: 'fa fa-search-minus',
    },
    zoomInButton: {
        icon: 'fa fa-search-plus',
    },
    nextPageButton: {
        icon: 'fa fa-arrow-right',
    },
    beforePageButton: {
        icon: 'fa fa-arrow-left',
    },
    rotateRightButton: {
        icon: 'fa fa-repeat',
    },
    rotateLeftButton: {
        icon: 'fa fa-undo',
    },
    resetButton: {
        icon: 'fa fa-eraser',
    },
};

and

{
            provide: IMAGEVIEWER_CONFIG,
            useValue: IMAGEVIEWER_CONFIG_DEFAULT,
}

Instead of icons I see only the text "fa-something". I'm not sure what I should do different. I'm using the old Font-based FontAwesome 4.7 btw.

I can't be the first one who wants to archive this, right? Thanks in advance!

Constantinos-Impact commented 5 years ago

You need to add the font code zoomInButton: createButtonConfig('\uF002', 'Zoom in', 1), rotateLeftButton: createButtonConfig('\uF0e2', 'Rotate left', 2),

@bb1