iconset: {} not working with fontawesome

[AncientPixel]

I initialize the iconpicker like this in JS:

$('#iconPick').iconpicker({
                    search: false,
                    cols: 6,
                    rows: 1,
                    icon: 'fa-folder',
                    iconset: { iconClass: 'glyphicon', iconClassFix: 'glyphicon-', icons: [ 'play', 'pause' ] },
                    //iconset: { iconClass: 'fontawesome', iconClassFix: 'fa-', icons: [ 'folder', 'book' ] },
                    placement: 'bottom',
                    selectedClass: 'btn-success',
                    unselectedClass: ''
                });

If I comment the glyphicon/iconset part out and then include the fontawesome/iconset part the icons do not show in the picker popup.

Am I doing something wrong?

[mitchc32]

Did you include the fontawesome iconset javascript file as well? You can find those in /js/iconset/ if you didn't. If this isn't your problem, would you providing what JS files you are loading?

[AncientPixel]

Thanks, I'm using a MEAN stack setup and loading the following:

<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />

    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/sb-admin-2.css">
    <link rel="stylesheet" href="css/timeline.css">    
    <link rel="stylesheet" href="css/bootstrap-iconpicker.min.css">

    <link rel="stylesheet" href="bower_components/metisMenu/dist/metisMenu.min.css">
    <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" type="text/css">

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <script src="bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
    <script src="bower_components/angular-loading-bar/build/loading-bar.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script src="bower_components/metisMenu/dist/metisMenu.min.js"></script>    

    <!-- http://johnny.github.io/jquery-sortable/ -->
    <script src="js/core/jquery.sortable.min.js"></script>

    <!-- http://mjolnic.com/fontawesome-iconpicker/ -->
    <script src="js/core/iconset/iconset-fontawesome-4.2.0.min.js"></script>
    <script src="js/core/bootstrap-iconpicker.min.js"></script>

    <script src="js/app.js"></script>
    <script src="js/sb-admin-2.js"></script>

It works if I do this:

$('#iconPick').iconpicker({
                    search: false,
                    cols: 6,
                    rows: 1,
                    icon: 'fa-folder',
                    iconset: 'fontawesome',
                    placement: 'bottom',
                    selectedClass: 'btn-success',
                    unselectedClass: ''
                });

But fails when I use: iconset: { iconClass: 'fontawesome', iconClassFix: 'fa-', icons: [ 'folder', 'book' ] }

[AncientPixel]

Fixed: the iconClass for fontawesome is 'fa' not 'fontawesome'. I saw this in the /iconset/iconset-fontawesome-4.2.0.min.js file.

[pihomeserver]

@AncientPixel can you please tell me how you did to use the picker with angular ? I include js files and the css one but when using the following code

<button class="btn btn-default" data-iconset="glyphicon" data-icon="glyphicon-camera" role="iconpicker"></button>

nothing happens (or it closes the modal where it's included) ...