Question

我使用bootstrap 4，fontawesome v5.7和此插件https://tempusdominus.github.io/bootstrap-4/Usage/

日历可以正常工作，但我的问题是图标未显示

查看此屏幕：

Answer 1

以下代码解决了我的问题。

$.fn.datetimepicker.Constructor.Default = $.extend({},
            $.fn.datetimepicker.Constructor.Default,
            { icons:
                    { time: 'fas fa-clock',
                        date: 'fas fa-calendar',
                        up: 'fas fa-arrow-up',
                        down: 'fas fa-arrow-down',
                        previous: 'fas fa-arrow-circle-left',
                        next: 'fas fa-arrow-circle-right',
                        today: 'far fa-calendar-check-o',
                        clear: 'fas fa-trash',
                        close: 'far fa-times' } });

Answer 2

我正在使用5.8版的真棒字体并遇到此问题。更改

fa-clock-o

到

fa-clock

在以下文件中为我修复了该问题-

tempusdominus-bootstrap-4.js

看起来FontAwesome已在版本5中更改了时钟图标的名称。

Answer 3

有关此信息，请参见官方文档：https://tempusdominus.github.io/bootstrap-4/Options/

可以通过以下方式获取/设置全局默认值 $ .fn.datetimepicker.Constructor.Default

例如设置图标以使用“真棒字体5”

$.fn.datetimepicker.Constructor.Default = $.extend({}, $.fn.datetimepicker.Constructor.Default, {
            icons: {
                time: 'far fa-clock',
                date: 'far fa-calendar',
                up: 'far fa-arrow-up',
                down: 'far fa-arrow-down',
                previous: 'far fa-chevron-left',
                next: 'far fa-chevron-right',
                today: 'far fa-calendar-check-o',
                clear: 'far fa-trash',
                close: 'far fa-times'
            } });

在启动选择器之前执行此操作。

也在官方文档中： https://tempusdominus.github.io/bootstrap-4/Usage/#custom-icons

自定义图标

<div class="container">
    <div class="col-sm-6">
        <div class="form-group">
            <div class="input-group date" id="datetimepicker9" data-target-input="nearest">
                <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker9"/>
                <div class="input-group-append" data-target="#datetimepicker9" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker9').datetimepicker({
                icons: {
                    time: "fa fa-clock-o",
                    date: "fa fa-calendar",
                    up: "fa fa-arrow-up",
                    down: "fa fa-arrow-down"
                }
            });
        });
    </script>
</div>

datetimepicker的图标未显示

3 个答案: