(PNG)
Here they are all mapped onto Bootstrap Icons, which the template already
ships locally (vendor/bootstrap-icons).
========================================================================== */
/* -- Reset the icon font for every Fabrik icon holder --------------------- */
span.fa,
span.fabrikIcon,
[data-isicon="true"],
.fabrikElementContainer i[class^="icon-"],
.fabrikElementContainer i[class*=" icon-"],
.btn > i[class^="icon-"],
.btn > i[class*=" icon-"] {
font-family: "bootstrap-icons" !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
display: inline-block;
vertical-align: -.125em;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* -- Legacy Joomla icon-* -> Bootstrap Icons glyphs ----------------------- */
.icon-plus::before,
.icon-add::before,
.icon-new::before { content: "\f4fe"; } /* bi-plus */
.icon-minus::before { content: "\f344"; } /* bi-dash */
.icon-remove::before,
.icon-delete::before,
.icon-cancel::before,
.icon-trash::before { content: "\f5de"; } /* bi-trash */
.icon-copy::before { content: "\f759"; } /* bi-copy */
.icon-edit::before,
.icon-pencil::before { content: "\f4ca"; } /* bi-pencil-square */
.icon-ok::before,
.icon-apply::before,
.icon-publish::before,
.icon-save::before { content: "\f26e"; } /* bi-check */
.icon-unpublish::before { content: "\f567"; } /* bi-slash-circle */
.icon-checkmark::before { content: "\f26a"; } /* bi-check-circle-fill */
.icon-eye::before,
.icon-eye-open::before { content: "\f341"; } /* bi-eye */
.icon-eye-close::before { content: "\f341"; } /* bi-eye */
.icon-search::before,
.icon-zoom-in::before { content: "\f52a"; } /* bi-search */
.icon-refresh::before,
.icon-reload::before,
.icon-loop::before { content: "\f130"; } /* bi-arrow-repeat */
.icon-undo::before { content: "\f117"; } /* bi-arrow-counterclockwise */
.icon-upload::before { content: "\f603"; } /* bi-upload */
.icon-download::before { content: "\f30a"; } /* bi-download */
.icon-file::before { content: "\f38b"; } /* bi-file-earmark-text */
.icon-print::before { content: "\f501"; } /* bi-printer */
.icon-envelope::before,
.icon-envelope-opened::before { content: "\f32f"; } /* bi-envelope */
.icon-list-view::before,
.icon-list::before { content: "\f478"; } /* bi-list-ul */
.icon-link::before { content: "\f470"; } /* bi-link-45deg */
.icon-filter::before { content: "\f3e1"; } /* bi-funnel */
.icon-calendar::before { content: "\f214"; } /* bi-calendar3 */
.icon-clock::before { content: "\f292"; } /* bi-clock-history */
.icon-star::before { content: "\f589"; } /* bi-stars */
.icon-star-empty::before { content: "\f586"; } /* bi-star */
.icon-home::before { content: "\f424"; } /* bi-house */
.icon-user::before { content: "\f4e1"; } /* bi-person */
.icon-users::before { content: "\f4e1"; } /* bi-person */
.icon-lock::before { content: "\f47b"; } /* bi-lock */
.icon-unlock::before { content: "\f47b"; } /* bi-lock */
.icon-key::before { content: "\f44d"; } /* bi-key */
.icon-cog::before,
.icon-options::before,
.icon-cogs::before { content: "\f3e5"; } /* bi-gear */
.icon-info::before,
.icon-info-2::before { content: "\f431"; } /* bi-info-circle */
.icon-warning::before { content: "\f33b"; } /* bi-exclamation-triangle */
.icon-question::before,
.icon-help::before { content: "\f505"; } /* bi-question-circle */
.icon-ban::before,
.icon-block::before { content: "\f6b6"; } /* bi-ban */
.icon-expand::before { content: "\f286"; } /* bi-chevron-up */
.icon-contract::before { content: "\f282"; } /* bi-chevron-down */
.icon-forward::before,
.icon-next::before { content: "\f285"; } /* bi-chevron-right */
.icon-backward::before,
.icon-previous::before { content: "\f284"; } /* bi-chevron-left */
.icon-first::before { content: "\f284"; } /* bi-chevron-left */
.icon-last::before { content: "\f285"; } /* bi-chevron-right */
.icon-play::before { content: "\f4f4"; } /* bi-play-fill */
.icon-pause::before { content: "\f4c3"; } /* bi-pause-fill */
.icon-stop::before { content: "\f4d6"; } /* bi-stop-fill */
.icon-lightning::before { content: "\f46d"; } /* bi-lightning-charge */
.icon-sort::before { content: "\f127"; } /* bi-arrow-down-up */
.icon-sort-asc::before { content: "\f57b"; } /* bi-sort-up */
.icon-sort-desc::before { content: "\f575"; } /* bi-sort-down */
.icon-arrow-up::before { content: "\f148"; } /* bi-arrow-up */
.icon-arrow-down::before { content: "\f128"; } /* bi-arrow-down */
.icon-flag::before { content: "\f4a4"; } /* bi-flag */
.icon-pin::before { content: "\f5ab"; } /* bi-tag */
.icon-tag::before { content: "\f5ab"; } /* bi-tag */
.icon-comment::before { content: "\f253"; } /* bi-chat-dots */
.icon-share::before { content: "\f1c5"; } /* bi-box-arrow-up-right */
.icon-menu::before { content: "\f479"; } /* bi-list */
.icon-grid::before { content: "\f3fc"; } /* bi-grid */
.icon-table::before { content: "\f5aa"; } /* bi-table */
.icon-database::before { content: "\f8c4"; } /* bi-database */
.icon-csv::before { content: "\f743"; } /* bi-filetype-csv */
.icon-pdf::before { content: "\f756"; } /* bi-filetype-pdf */
.icon-spreadsheet::before { content: "\f3b7"; } /* bi-file-spreadsheet */
.icon-export::before { content: "\f348"; } /* bi-file-arrow-up */
.icon-import::before { content: "\f346"; } /* bi-file-arrow-down */
.icon-feed::before { content: "\f5a4"; } /* bi-rss */
.icon-checkbox::before { content: "\f26c"; } /* bi-check2-square */
.icon-radio::before { content: "\f309"; } /* bi-record-circle */
.icon-toggle::before { content: "\f5cb"; } /* bi-toggles */
/* Fallback: an icon that carries no recognisable class still shows something
instead of a blank.
The :not() guards are ESSENTIAL, not cosmetic. This selector is more
specific than the single-class mappings above (a pseudo-class and two
attribute selectors versus one class), so without them it would win over
every mapping and ALL icons would show the same glyph. Excluding anything
with a recognisable class keeps the fallback for genuinely unknown icons
only. */
span.fa:empty:not([class*="icon-"]):not([class*="fa-"]):not([class*="bi-"])::before,
[data-isicon="true"]:empty:not([class*="icon-"]):not([class*="fa-"]):not([class*="bi-"])::before {
content: "\f431";
}
/* -- Font Awesome 4 names emitted directly by Fabrik ---------------------- */
.fa.fa-edit::before { content: "\f4ca"; } /* pencil-square */
.fa.fa-pencil::before { content: "\f4ca"; }
.fa.fa-trash::before,
.fa.fa-trash-o::before { content: "\f5de"; } /* trash */
.fa.fa-plus::before { content: "\f4fe"; }
.fa.fa-minus::before { content: "\f344"; }
.fa.fa-search::before { content: "\f52a"; }
.fa.fa-refresh::before,
.fa.fa-repeat::before { content: "\f130"; }
.fa.fa-check::before { content: "\f26e"; }
.fa.fa-times::before,
.fa.fa-close::before { content: "\f659"; } /* x-lg */
.fa.fa-copy::before { content: "\f759"; }
.fa.fa-file::before { content: "\f38b"; }
.fa.fa-print::before { content: "\f501"; }
.fa.fa-envelope::before { content: "\f32f"; }
.fa.fa-calendar::before { content: "\f214"; }
.fa.fa-clock-o::before { content: "\f292"; }
.fa.fa-eye::before { content: "\f341"; }
.fa.fa-download::before { content: "\f30a"; }
.fa.fa-upload::before { content: "\f603"; }
.fa.fa-ban::before { content: "\f6b6"; } /* bi-ban */
.fa.fa-sort::before { content: "\f127"; }
.fa.fa-filter::before { content: "\f3e1"; }
.fa.fa-list::before { content: "\f478"; }
.fa.fa-exclamation-triangle::before { content: "\f33b"; }
.fa.fa-star::before { content: "\f586"; }
.fa.fa-lock::before { content: "\f47b"; }
.fa.fa-user::before { content: "\f4e1"; }
.fa.fa-cog::before { content: "\f3e5"; }
.fa.fa-link::before { content: "\f470"; }
.fa.fa-chart-bar::before { content: "\f1a8"; } /* bi-bar-chart */
/* -- Frecce e chevron (paginazione form "Prev"/"Successivo") --------------
Senza mapping questi span restano VUOTI: la classe contiene "fa-" quindi
il fallback :empty non li copre. */
.fa.fa-angle-left::before,
.fa.fa-chevron-left::before,
.fa.fa-arrow-left::before { content: "\f284"; } /* bi-chevron-left */
.fa.fa-angle-right::before,
.fa.fa-chevron-right::before,
.fa.fa-arrow-right::before { content: "\f285"; } /* bi-chevron-right */
.fa.fa-angle-up::before,
.fa.fa-chevron-up::before,
.fa.fa-arrow-up::before { content: "\f286"; } /* bi-chevron-up */
.fa.fa-angle-down::before,
.fa.fa-chevron-down::before,
.fa.fa-arrow-down::before { content: "\f282"; } /* bi-chevron-down */
.fa.fa-angle-double-left::before { content: "\f27f"; } /* bi-chevron-double-left */
.fa.fa-angle-double-right::before { content: "\f280"; } /* bi-chevron-double-right */
/* -- Stato dell'ordinamento delle colonne ---------------------------------
Fabrik scambia la classe dello span fra fa-sort / fa-sort-down (crescente)
e fa-sort-up (decrescente): senza questi due mapping, ordinando una colonna
l'indicatore sparisce. */
.fa.fa-sort-down::before,
.fa.fa-sort-asc::before { content: "\f575"; } /* bi-sort-down (asc) */
.fa.fa-sort-up::before,
.fa.fa-sort-desc::before { content: "\f57b"; } /* bi-sort-up (desc) */
/* -- Altri nomi FA4 ancora emessi da Fabrik ------------------------------- */
.fa.fa-times-circle::before,
.fa.fa-times-circle-o::before { content: "\f623"; } /* bi-x-circle */
.fa.fa-check-circle::before,
.fa.fa-check-circle-o::before { content: "\f26a"; } /* bi-check-circle-fill */
.fa.fa-info-circle::before { content: "\f431"; } /* bi-info-circle */
.fa.fa-floppy-o::before,
.fa.fa-save::before { content: "\f7d8"; } /* bi-floppy */
.fa.fa-bars::before { content: "\f479"; } /* bi-list */
.fa.fa-th::before,
.fa.fa-th-large::before { content: "\f3fc"; } /* bi-grid */
.fa.fa-file-text-o::before,
.fa.fa-file-o::before { content: "\f38b"; } /* bi-file-earmark-text */
.fa.fa-envelope-o::before { content: "\f32f"; } /* bi-envelope */
.fa.fa-external-link::before { content: "\f1c5"; } /* bi-box-arrow-up-right */
/* -- Bottoni toolbar: il glifo che si legge meglio nel contesto -----------
Specificita' (0,3,0): batte sia le mappe .icon-* sia quelle .fa.*. */
.com_fabrik .groupBy > .fa::before { content: "\f2cc"; } /* bi-collection - "Raggruppato per" */
.com_fabrik .clearFilters > .fa::before { content: "\f331"; } /* bi-eraser - "Pulisci" */
.com_fabrik .pdfButton > .fa::before { content: "\f756"; } /* bi-filetype-pdf - "Pdf" */
/* -- Obsolete PNG sprites -> vector icons --------------------------------- */
/* "Dettaglio" magnifier (search.png) used by the view row action */
.fabrikImg,
img[src*="com_fabrik/images/search.png"],
img[src*="com_fabrik/images/arrow-up.png"],
img[src*="com_fabrik/images/feed.png"] {
display: none !important;
}
/* Put the vector icon back on the parent link.
"Dettaglio" apre la vista di sola lettura: l'occhio e' l'affordance
standard per "guarda", piu' immediato della vecchia info-circle. */
a.fabrik_view::before {
content: "\f341"; /* bi-eye */
font-family: "bootstrap-icons" !important;
font-style: normal;
font-weight: normal;
line-height: 1;
display: inline-block;
vertical-align: -.125em;
}
a.fabrik_edit::before {
content: "\f4ca"; /* bi-pencil-square */
font-family: "bootstrap-icons" !important;
font-style: normal;
font-weight: normal;
line-height: 1;
display: inline-block;
vertical-align: -.125em;
}
/* Bottone "aggiorna colonna" dei list plugin (es. FIRMATO): Fabrik lo emette
SENZA icona, cosi' il bottone risultava vuoto. bi-patch-check = timbro /
approvazione, coerente con azioni tipo "firma". */
.com_fabrik td.fabrik_actions .btn[class*="update_col"]::before,
.com_fabrik th.fabrik_actions .btn[class*="update_col"]::before {
content: "\f4b6"; /* bi-patch-check */
font-family: "bootstrap-icons" !important;
font-style: normal;
font-weight: normal;
line-height: 1;
display: inline-block;
vertical-align: -.125em;
}
/* "Dettaglio" (a.fabrik_view) e "Modifica" (a.fabrik_edit) portano la loro
icona nel ::before del link (o in un PNG legacy): un eventuale span icona
dentro il bottone va nascosto, altrimenti si vedono DUE glifi - che e'
esattamente cio' che capitava su "Modifica" (matita + info).
IMPORTANTE: la regola e' volutamente ristretta a questi due link. Gli
altri bottoni di riga (Copia, Congualio, plugin custom) usano lo PROPRIO
span interno come unica icona: nasconderlo li lasciava come quadratini
vuoti cliccabili (era il caso di Copia/Congualio nelle righe, mentre
nell'header si vedevano perche' li' il selettore non matchava). */
.com_fabrik .fabrik_actions a.fabrik_view > span[data-isicon],
.com_fabrik .fabrik_actions a.fabrik_view > span.fa,
.com_fabrik .fabrik_actions a.fabrik_view > i[class^="icon-"],
.com_fabrik .fabrik_actions a.fabrik_view > i[class*=" icon-"],
.com_fabrik .fabrik_actions a.fabrik_edit > span[data-isicon],
.com_fabrik .fabrik_actions a.fabrik_edit > span.fa,
.com_fabrik .fabrik_actions a.fabrik_edit > i[class^="icon-"],
.com_fabrik .fabrik_actions a.fabrik_edit > i[class*=" icon-"] {
display: none !important;
}
.feedButton::before {
content: "\f5a4"; /* bi-rss */
font-family: "bootstrap-icons" !important;
}
/* Modern loader instead of ajax-loader.gif */
img[src*="ajax-loader.gif"],
img[src*="loading.gif"] {
opacity: .0;
width: 0;
}
.fabrik_loading,
.fabrikLoading {
display: inline-block;
width: 1rem;
height: 1rem;
border: 2px solid var(--fv-primary);
border-right-color: transparent;
border-radius: 50%;
animation: fv-spin .6s linear infinite;
vertical-align: -.125em;
}
@keyframes fv-spin {
to { transform: rotate(360deg); }
}
/* -- Bootstrap caret helper keeps working --------------------------------- */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: .25rem;
vertical-align: middle;
border-top: .3em solid;
border-right: .3em solid transparent;
border-bottom: 0;
}
/* Dentro Fabrik il caret e' un chevron, piu' moderno del triangolo */
.com_fabrik .caret {
width: auto;
height: auto;
border: 0;
font-family: "bootstrap-icons" !important;
font-size: .7em;
line-height: 1;
opacity: .65;
vertical-align: .08em;
}
.com_fabrik .caret::before { content: "\f282"; } /* bi-chevron-down */
/* ==========================================================================
03. GLOBAL FIXES
========================================================================== */
/* Bootstrap 5 dropped .hidden — Fabrik relies on it for accessible labels.
Without this every "Modifica" / "Dettaglio" / "Cancella" label is visible. */
.com_fabrik .hidden,
.fabrikModalBody .hidden,
.fabrikForm .hidden,
.fabrikDataContainer .hidden {
display: none !important;
}
.fabrikHide {
display: none !important;
}
/* .btn-default does not exist in Bootstrap 5 — 2000+ Fabrik buttons use it.
Neutral "soft" look so they never render as unstyled/borderless blobs. */
.btn-default {
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: var(--fv-surface-2, var(--bs-tertiary-bg));
--bs-btn-border-color: var(--fv-border, var(--bs-border-color));
--bs-btn-hover-color: var(--bs-body-color);
--bs-btn-hover-bg: var(--bs-secondary-bg);
--bs-btn-hover-border-color: var(--bs-border-color);
--bs-btn-active-color: var(--bs-body-color);
--bs-btn-active-bg: var(--bs-secondary-bg);
--bs-btn-active-border-color: var(--bs-border-color);
--bs-btn-disabled-opacity: .55;
--bs-btn-focus-shadow-rgb: 0, 0, 0;
}
/* Fabrik emits many bare (no variant) in the list toolbar.
The :not() chain below is deliberately EXCLUDING the buttons that have their
own treatment further down (add, record actions) — otherwise the specificity
of `:not([class*="btn-"])` (0,3,0) would beat those rules (0,2,0) and the
"Aggiungi" button would fall back to a plain white look. */
.fabrikButtonsContainer .btn:not([class*="btn-"]):not(.addbutton):not(.addRecord),
.fabrikForm > .container-fluid .btn:not([class*="btn-"]):not(.addbutton):not(.addRecord),
.fabrikList .btn:not([class*="btn-"]):not(.addbutton):not(.addRecord) {
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: var(--bs-body-bg);
--bs-btn-border-color: var(--bs-border-color);
--bs-btn-hover-color: var(--bs-primary);
--bs-btn-hover-bg: var(--fv-primary-soft);
--bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-color: var(--bs-primary);
--bs-btn-active-bg: var(--fv-primary-soft);
--bs-btn-active-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: 0, 0, 0;
}
/* Fabrik uses .pull-left / .pull-right (Bootstrap 2 float helpers) */
.com_fabrik .pull-left { float: left; }
.com_fabrik .pull-right { float: right; }
[dir="rtl"] .com_fabrik .pull-left { float: right; }
[dir="rtl"] .com_fabrik .pull-right { float: left; }
/* Legacy "row-fluid" wrapper used by the form details toolbar */
.com_fabrik .row-fluid {
display: flex;
flex-wrap: wrap;
gap: .5rem;
width: 100%;
}
.com_fabrik .row-fluid > [class*="col-"] {
width: auto;
flex: 1 1 auto;
}
/* ==========================================================================
04. COMPONENT SHELL (card)
--------------------------------------------------------------------------
Reference: AdminLTE 4 "tables/data.html" and "tables/simple.html".
AdminLTE wraps a table page in: