bs-iconpicker

Bootstrap 3 Icon Picker for AngularJS


Keywords
Bootstrap, Font Awesome, Iconpicker, AngularJS, Angular-strap
License
MIT
Install
bower install bs-iconpicker#v1.0.1

Documentation

bs-iconpicker - Bootstrap 3 Icon Picker for AngularJS

Bower version devDependencies Status

bs-iconpicker is a Bootstrap (and optionally Font Awesome) icons picking component implemented in AngularJS.

Usage

Dependencies

bs-iconpicker depends only on Angular-Strap, and thus also depends on AngularJS and Bootstrap's CSS. It also supports Font Awesome icons.

Installation

Normally you would use bs-iconpicker like this:

<html>
<head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <!-- Font-Awesome CSS (Optional) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
    <!-- AngularJS CSP CSS -->
    <link rel="stylesheet" href="//rawgithub.com/angular/code.angularjs.org/master/1.2.16/angular-csp.css">
    <!-- bs-iconpicker CSS -->
    <link rel="stylesheet" href="//rawgithub.com/m-mts/bs-iconpicker/v0.0.1/dist/styles/bs-iconpicker.min.css">
</head>
<body ng-app>
    <!-- Body Content -->

    <!-- AngularJS Script -->
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <!-- Angular Strap Script -->
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <!-- bs-iconpicker Script -->
    <script type="text/javascript" src="//rawgithub.com/m-mts/bs-iconpicker/v0.0.1/dist/scripts/bs-iconpicker.min.js"></script>
    <script>

        // load bs-iconpicker as Angular dependency
        angular.module('myModule', ['bs-iconpicker']);

    </script>
</body>
</html>

bs-iconpicker also supports the AMD API (RequireJS), the same scripts from above would look like the following with RequireJS:

require.config({
    paths: {
        'angular': '//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min',
        'angular-strap': 'bower_components/angular-strap/dist/angular-strap.min.js',
        'angular-strap-templates': 'bower_components/angular-strap/dist/angular-strap.tpl.min.js',
        'bs-iconpicker': '//rawgithub.com/m-mts/bs-iconpicker/v0.0.1/dist/scripts/bs-iconpicker.min',
    },

    shim: {
        'angular': {
            exports: 'angular',
        },
        'angular-strap': {
            deps: ['angular'],
        },
    },
});

require(['angular', 'bs-iconpicker'], function (angular) {

    // load bs-iconpicker as Angular dependency
    angular.module('myModule', ['bs-iconpicker']);

});