Combination of Bootstrap 5, Bootstrap icons and jquery-ui

[omerix]

Hello,

I'm trying to refresh the screens with Bootstrap 5 and Bootstrap icon as the text looks better on mobile and other devices with Bootstrap 5.

But since I am using Autocomplete, Dialog I have to add jquery-ui to my page.

I'm currently using Bootstrap and Jquery-ui together without conflicts with the code below.

But I don't want to use jquery-ui icons. Bootstrap icons are better. (https://icons.getbootstrap.com/icons/)

Example: I want to use "bi bi-arrow-left " instead of "ui-icon ui-icon-seek-prev ", I couldn't find where to change it from css. There are similar statements in the dev.js file. Will I need to edit this file?

The layout I use

Code: [Select]

    <!-- jquery -->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>


    <!-- jquery-ui -->
    <link rel="stylesheet" href="/js/jquery-ui-bootstrap/jqueryui.css">
    <link rel="stylesheet" href="/js/jquery-ui-bootstrap/jquery-ui.min.css">   
    <script src="/js/jquery-ui-bootstrap/jquery-ui.min.js"></script>


    <!--
    <link rel="stylesheet" href="/node_modules/jquery-ui/dist/themes/base/jquery-ui.min.css">
    <link rel="stylesheet" href="/js/jquery-ui-bootstrap/jqueryui.css">
    <script src="/node_modules/jquery-ui/dist/jquery-ui.min.js"></script>
    -->


    <!-- bootstrap -->
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/node_modules/bootstrap-icons/font/bootstrap-icons.css">
    <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>


    <!-- pqgrid -->
    <link rel="stylesheet" href="/js/qpGrid/8.5.0/pqSelect/pqselect.min.css">
    <script src="/js/qpGrid/8.5.0/pqSelect/pqselect.min.js"></script>

    <link rel="stylesheet" href="/js/qpGrid/8.5.0/pqgrid.min.css">
    <link rel="stylesheet" href="/js/qpGrid/8.5.0/pqgrid.ui.min.css">
    <link rel="stylesheet" href="/js/qpGrid/8.5.0/themes/bootstrap/pqgrid.css">
    <link rel="stylesheet" href="/js/qpGrid/8.5.0/ek.css">
    <script src="/js/qpGrid/8.5.0/pqgrid.dev.js"></script>
    <script src="/js/qpGrid/8.5.0/jsZip-2.5.0/jszip.min.js"></script>
    <script src="/js/qpGrid/8.5.0/jsZip-2.5.0/filesaver.js"></script>
    <script src="/js/qpGrid/8.5.0/localize/pq-localize-tr.js"></script>
    <script src="/js/qpGrid/8.5.0/pqTouch/pqtouch.min.js"></script>
    <script src="/js/qpGrid/8.5.0/javascript-detect-element-resize/jquery.resize.js"></script>
    <script src="/js/qpGrid/demo.js"></script>


[paramvir]

icon names are in js file and not in css file.