Font Awesome Pro

Bildschirmfoto_2022-07-25_um_17
Extension Configuration
Extension Configuration

Wenn du eine Lizenz für Font Awesome Pro erworben hast, kannst du FA-Pro wie folgt einbinden.

Nach dem Download folgende Verzeichnisse erstellen/kopieren (s.Screenshot):

fileadmin/T3SB/FA6Pro/css/
fileadmin/T3SB/FA6Pro/js/
fileadmin/T3SB/FA6Pro/webfonts/ (komplett)

... "js" für das FE ... "css" und "webfonts" für das BE (RTE/ EXT:rte_ckeditor_fontawesome).

Danach muss in der Extension Configuration (Settings) im Tabulator "Advanced" unter "Font Awesome" die entsprechende Auswahl getroffen werden (s. Screenshot).

Wenn die EXT:rte_ckeditor_fontawesome installiert und aktiviert wurde, werden auch für diese EXT die Icons von FA-Pro bereitgestellt.

Kit's Code
Wenn du einen "Kit's Code" hast, muss in der Extension Configuration für Font Awesome "none" ausgewählt werden.
Um dein "Kit" zu installieren, kannst du z.B. folgendes Setup (mit deinem "Kit`s Code") einfügen:

page.footerData {
	61 = TEXT
	61.value = <script src="https://kit.fontawesome.com/2737f953e3.js" crossorigin="anonymous"></script>
}

....oder - DSGVO-Konform mit Content Consent:

[traverse(request.getCookieParams(), 'cookieconsent_status') == 'allow']
page.includeJSFooter.fontawesome >
page.footerData.61 >
page.footerData {
	661 = TEXT
	661.value = <script src="https://kit.fontawesome.com/2737f953e3.js" crossorigin="anonymous"></script>
}
[END]

Custom color für duoton:

.svg-inline--fa .fa-primary {
	fill: #28a745;
	opacity: 1;
}
.svg-inline--fa .fa-secondary {
	fill: #ffc107;
	opacity: .4;
}

Custom FA Style:
Als Standard wird bei der Integration von FApro der Solid-Style verwendet. Dies kann im eigenem CSS durch folgendes angepasst werden:

/* FAPro Regular: */
.internal-link::before,
.external-link::before,
.download-link::before,
.email-link::before,
.phone-link::before {
  font-weight: 400!important;
}
/* FAPro Light: */
.internal-link::before,
.external-link::before,
.download-link::before,
.email-link::before,
.phone-link::before {
  font-weight: 300!important;
}