光年模板说明文档
主题
字号
18px

fontIconPicker图标选择

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

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

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

<input type="text" id="icon-example" name="icon-example" />
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事件获取的，实际使用中不一定要用。

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

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

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

点击查看 图标选择插件 在线演示

涉及的文件：