fontIconPicker图标选择

fontIconPicker是一款非常小巧的jQuery字体图标选择器。这里整合的版本是v2.0.0。插件可以配置字体图标json，从而可以使用各种不同的图标字体。

github地址：https://github.com/micc83/fontIconPicker

官网地址：https://codeb.it/fonticonpicker/

![](/uploads/images/20220105/0195364da6983fa86219a78e285c76bf.png)

```html
<input type="text" id="icon-example" name="icon-example" />
```
```html
jQuery(document).ready(function($) {
    var font_element = $('#icon-example').fontIconPicker({
        theme: 'fip-bootstrap'
    });
    
    $.ajax({
        url: './js/fontIconPicker/fontjson/materialdesignicons.json',
        type: 'GET',
        dataType: 'json'
    }).done(function(response) {
 
        var fontello_json_icons = [];
 
        $.each(response.glyphs, function(i, v) {
            fontello_json_icons.push( v.css );
        });
 
        font_element.setIcons(fontello_json_icons);
    }).fail(function() {
        console.error('字体图标配置加载失败');
    });
});
```

选择后可直接获取选择后的值。例如：`$("#icon-example").val();`

> url根据自己的实际项目中地址而定，另外示例中右侧显示的这个图标class名，是单独绑定change事件获取的，实际使用中不一定要用。

以下是绑定事件，是为了展示获取当前选中的图标值的。

```javascript
$(document).on('change', '#icon-example', function(){
    $('#show-mdi').html($(this).val());
});
```

插件项目中页面名字：`test_fontIconPicker.html` `test_fontIconPicker_v4.html`

[点击查看 图标选择插件 在线演示](http://example.itshubao.com/example/113.html "点击查看 图标选择插件 在线演示")

涉及的文件：
- `js/fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css`
- `js/fontIconPicker/jquery.fonticonpicker.min.js`
- `js/fontIconPicker/fontjson/materialdesignicons.json` (v3版本用)
- `js/fontIconPicker/fontjson/materialdesignicons_v4.json` (v4版本用)