layui.config({
            base: './module/'
        }).extend({
            iconHhysFa: 'iconHhys/iconHhysFa'
        });

<div class="layui-form">
        <blockquote class="layui-elem-quote">
       layui-иконка
       <a class="layui-btn layui-btn-normal" href="https://gitee.com/luckygyl/iconFonts" target="_blank">Адрес кода</a>
        </blockquote>   
        <div class="layui-form-item">
            <label for="" class="layui-form-label">Стандартная иконка:</label>
            <div class="layui-input-block">
                <input type="text" id="iconHhysFa" lay-filter="" class="hide">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">Пользовательская иконка:</label>
            <div class="layui-input-block">
                <input type="text" id="iconHhysFa2" value="" lay-filter="iconHhysFa2" class="hide">
            </div>
        </div>

  <blockquote class="layui-elem-quote">
       font-awesome-иконки
        </blockquote>   
        <div class="layui-form-item">
            <label for="" class="layui-form-label">Стандартная иконка:</label>
            <div class="layui-input-блок">
                <input type="text" id="iconHhys" lay-фильтр="iconHhys" класс="скрыть">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="" class="layui-form-label">Пользовательская иконка:</label>
            <div class="layui-input-блок">
                <input type="text" id="iconHhys2" значение="" lay-фильтр="iconHhys2" класс="скрыть">
            </div>
        </div>
    

 <script>
            layui.use(['iconHhysFa', 'form', 'layer'], function() {
                var iconHhysFa = layui.iconHhysFa,
                    form = layui.form,
                    layer = layui.layer,
                    $ = layui.$;

                iconHhysFa.render({
                    // Селектор, рекомендуется использовать input
                    elem: '#iconHhysFa',
                    // Тип данных: fontClass/awesome, рекомендуется использовать fontClass
                    type: 'fontClass',
                    // Включить поиск: true/false, по умолчанию true
                    search: true,
                    // Открыть разбиение на страницы: true/false, по умолчанию true
                    page: true,
                    // Количество элементов на странице, по умолчанию 12
                    limit: 12,
                    url: '',
                    value: '',//Стандартная иконка
                    // Обратный вызов при нажатии
                    click: function(data) {
                        console.log(data);
                    },
                    // Успешный обратный вызов после рендеринга
                    success: function(d) {
                        console.log(d);
                    }
                });

                iconHhysFa.render({
                    // Селектор, рекомендуется использовать input
                    elem: '#iconHhysFa2',
                    // Тип данных: fontClass/awesome
                    type: 'fontClass',
                    // Включить поиск
                    search: true,
                    url: '',
                    // Открыть разбиение на страницы
                    page: true,
                    // Количество элементов на странице
                    limit: 12,
                    value: 'layui-icon-face-smile-fine',//Пользовательская стандартная иконка
                    // Обратный вызов при нажатии
                    click: function(data) {
                        console.log(data);
                    },
                    // Успешный обратный вызов после рендеринга
                    success: function(d) {
                               console.log(d);
                           }
                 });

               
               ////////font-awesome иконки
               
                 iconHhysFa.render({
                    // Селектор, рекомендуется использовать input
                    elem: '#iconHhys',
                    // Тип данных: fontClass/awesome, рекомендуется использовать awesome
                    type: 'awesome',
                    // Включить поиск: true/false
                    search: true,
                    // Открыть разбиение на страницы: true/false
                    page: true,
                    // Количество элементов на странице

``` **Предел: 12,**

// fa 图标接口
url: './font-awesome/less/variables.less',
value:'', //默认图标 

// 点击回调
click: function(data) {
    console.log(data);
},

// 渲染成功后的回调
success: function(d) {
    console.log(d);
}
});

iconHhysFa.render({
    // 选择器，推荐使用input
elem: '#iconHhys2',

// 数据类型：fontClass/awesome，推荐使用fontClass
type: 'awesome',

// 是否开启搜索：true/false
search: true,

// fa 图标接口
url: './font-awesome/less/variables.less',

// 是否开启分页
page: true,

// 每页显示数量，默认12
limit: 12,

// 自定义默认图标
value:'fa-home',

// 点击回调
click: function(data) {
    console.log(data);
},

// 渲染成功后的回调
success: function(d) {
    console.log(d);
}
});
});
</script>

**Проект: скриншоты Layui и Font Awesome**

Скриншот Layui:

![введите описание изображения](https://images.gitee.com/uploads/images/2020/0623/153917_0171914a_1513275.png "微信截图_20200623153946.png")

Скриншот Font Awesome:

![введите описание изображения](https://images.gitee.com/uploads/images/2020/0623/154006_6c026cba_1513275.png "_20200623154040.png")

#### Благодарности

1. [Font Awesome](https://fontawesome.com/?from=io)
2. [Layui](https://www.layui.com/)
3. [Font-Awesome-CDN](https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css)
4. [IconPicker](https://fly.layui.com/extend/iconPicker/)

#### Вопросы и обратная связь

Если у вас возникли вопросы при использовании iconHhysFa, пожалуйста, свяжитесь со мной по адресу jackhhy520@qq.com или оставьте комментарий ниже.

Также, если вам понравился проект, не забудьте поставить ему звезду!