ParamQuery grid support forum

General Category => Suggest new features => Topic started by: omerix on March 14, 2023, 01:59:33 am

Title: bootstrap icons
Post by: omerix on March 14, 2023, 01:59:33 am

It would be great if there is something parametric like a language file for icons and bootstrap icons are supported.

https://icons.getbootstrap.com

Here jquery ui and bootstrap are well combined. (Although the Bootstrap version is old, I'm trying to renew it)

https://demos.pixinvent.com/modern-html-admin-template/html/ltr/vertical-modern-menu-template/jquery-ui-dialog-tooltip.html

Title: Re: bootstrap icons
Post by: omerix on March 15, 2023, 01:36:14 am

I realized it can be done with CSS. The changes I wanted were made with a css as follows.

Code: [Select]

<!-- Pq Grid 8.7.0 -->
<link rel='stylesheet' type='text/css' href='/setJs/qpGrid/8.7.0/pqgrid.min.css?1.20230313-53'/>
<link rel='stylesheet' type='text/css' href='/setJs/qpGrid/8.7.0/pqgrid.ui.min.css?1.20230313-53'/>
<link rel='stylesheet' type='text/css' href='/setJs/qpGrid/8.7.0/themes/bootstrap/pqgrid.css?1.20230313-53'/>
<script type='text/javascript' src='/setJs/qpGrid/8.7.0/pqgrid.dev.js?1.20230313-53'></script>
<script type='text/javascript' src='/setJs/qpGrid/8.7.0/pqTouch/pqtouch.min.js?1.20230313-53'></script>
<script type='text/javascript' src='/setJs/qpGrid/8.7.0/jsZip-2.5.0/jszip.min.js?1.20230313-53'></script>
<script type='text/javascript' src='/setJs/qpGrid/8.7.0/jsZip-2.5.0/filesaver.js?1.20230313-53'></script>
<script type='text/javascript' src='/setJs/qpGrid/8.7.0/localize/pq-localize-tr.js?1.20230313-53'></script>
<!--<script type='text/javascript' src='/setJs/jqueryUi/1.12.1/i18n/datepicker-tr.js?1.20230313-53'></script>-->
<style>
/* Icons change */
.fas, .ui-icon, .ui-menu-icon {
font-family:bootstrap-icons !important;
text-indent:0px;
}
.fa-save::before{content:"\f272"}
.fa-plus::before{content:"\f64d"}
.fa-undo::before{content:"\f117"}
.fa-redo::before{content:"\f116"}
.ui-icon-seek-first::before{content:"\f22d"}
.ui-icon-seek-prev::before{content:"\f230"}
.ui-icon-seek-next::before{content:"\f234"}
.ui-icon-seek-end::before{content:"\f231"}
.ui-icon-refresh::before{content:"\f2ff"}
.ui-icon-carat-1-w::before{content:"\f3fe"}
.ui-icon-close::before{content:"\f659"}
.ui-icon-triangle-1-e::before{content:"\f488"}
.ui-icon-triangle-1-se::before{content:"\f489"}
</style>


Title: Re: bootstrap icons
Post by: omerix on March 15, 2023, 02:54:24 am

latest version

Code: [Select]

/* Icons change */
.fas, .ui-icon, .ui-menu-icon ,.pq-group-icon {
font-family:bootstrap-icons !important;
font-size:0.85em !important;
text-indent:0px;
}
.fa-save::before{content:"\f272"}
.fa-plus::before{content:"\f64d"}
.fa-undo::before{content:"\f117"}
.fa-redo::before{content:"\f116"}
.ui-icon-seek-first::before{content:"\f22d"}
.ui-icon-seek-prev::before{content:"\f230"}
.ui-icon-seek-next::before{content:"\f234"}
.ui-icon-seek-end::before{content:"\f231"}
.ui-icon-refresh::before{content:"\f2ff"}
.ui-icon-carat-1-w::before{content:"\f3fe"}
.ui-icon-close::before{content:"\f659"}
.ui-icon-triangle-1-e::before{content:"\f488"}
.ui-icon-triangle-1-se::before{content:"\f489"}
.ui-icon-triangle-1-s::before{content:"\f145"}
.ui-icon-triangle-1-n::before{content:"\f124"}
.pq-menu-icon ,.pq-filter-icon {
font-family:bootstrap-icons !important;
background:transparent;
}
.pq-menu-icon::before{content:"\f5d3"}
.pq-filter-icon::before{content:"\f3e1"}



Title: Re: bootstrap icons
Post by: paramvir on March 15, 2023, 02:46:16 pm

Thank you Omer for your feedback, I'm looking into it.