Bootstrap значок таблицы 4 отображается неправильно - PullRequest
Новая
       6

Bootstrap значок таблицы 4 отображается неправильно

0 голосов
/ 09 января 2020

Я создал таблицу bootstrap в своем приложении flask с некоторыми расширениями, как показано в документации. Все работает отлично, за исключением кнопок, которые не отображают значки, что делает их недружественными для пользователя. Проблема одинакова для всех браузеров (google chrome и safari) и в приложении, развернуто ли оно локально или в облаке (движок приложения)

Вот мой заголовок: 

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Walrus</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/sticky-header/bootstrap-table-sticky-header.css">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css">
  <link rel='stylesheet' type=text/css href="{{ url_for('static', filename='styles.css') }}"/>
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->    
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>     
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>  
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>       
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
   </head>

А вот скрипт, генерирующий таблицу: 

<div class="main">

              <table class='table table-hover table-bordered'
            id="table"
            data-search='true'
            data-advanced-search="true"
            data-id-table="advancedTable" 
            data-show-columns='true'
            data-show-multi-sort="true"
            data-toolbar="#toolbar"
            data-show-export="true"
            >
            </table> 

                 <script>
                $('#table').bootstrapTable({
                    columns: [
                        {% for c in my_cols %}
                        {
                    field: '{{c}}',
                    title: '{{c}}',
                    sortable: true
                    },
                    {% endfor %}
                      ],
                    data: {{my_records|safe}},
                    pagination: true,
                    sortable: true,
                    fixedColumns: true,
                    fixedNumber: 5,
                    width: "900"
                  })
                </script>

Вот как выглядят мои кнопки: снимок

Есть идеи, как это исправить? Заранее спасибо!

...