Font Awesome im Menü?

Devon · October 20, 2023 at 6:12 PM

Hallo.

Früher konnte man dies ja mittels CSS lösen. Ist ja wohl nun seit der Umstieg auf FA6 Geschichte oder irre ich mich?

Aze · October 20, 2023 at 6:23 PM

Richtig, müsstest du mittels JS setzen, siehe https://docs.woltlab.com/6.0/migration/wsc55/icons/

Audifire · October 20, 2023 at 7:19 PM

Ich habe folgendes in das Template pageHeader gepackt (nicht schön, aber selten ):

Smarty: pageHeader.tpl

<script data-relocate="true">
const mainMenuList = document.querySelector("#pageHeaderMenu ol");
const listItems = mainMenuList.children;
for (const listItem of listItems) {
    let icon = undefined;
    switch (listItem.dataset.identifier) {
        case 'com.woltlab.wbb.BoardList':
            icon = document.createElement("fa-icon");
            icon.setIcon("folder", true);
            break;
		case 'com.woltlab.wcf.generic24': // Ressourcen
            icon = document.createElement("fa-icon");
            icon.setIcon("file-code", true);
            break;
        case 'com.woltlab.wcf.MembersList':
            icon = document.createElement("fa-icon");
            icon.setIcon("users", true);
            break;
        case 'com.woltlab.wcf.Team':
            icon = document.createElement("fa-icon");
            icon.setIcon("user", true);
            break;
        case 'com.woltlab.wcf.generic26':
            icon = document.createElement("fa-icon");
            icon.setIcon("circle-question", true);
            break;
		case 'com.woltlab.wcf.generic22':
            icon = document.createElement("fa-icon");
            icon.setIcon("globe", true);
            break;
        case 'ch.audifire.mtaServerBrowser.MtaServerList':
            icon = document.createElement("fa-icon");
            icon.setIcon("earth-americas", true);
            break;
        case 'com.woltlab.wcf.generic20': // Teamspeak
            icon = document.createElement("fa-brand");
            icon.innerHTML = '<svg slot="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M152.8 37.2c-32.2 38.1-56.1 82.6-69.9 130.5c0 .2-.1 .3-.1 .5C43.5 184.4 16 223 16 268c0 59.6 48.4 108 108 108s108-48.4 108-108c0-53.5-38.9-97.9-90-106.5c15.7-41.8 40.4-79.6 72.3-110.7c1.8-1.6 4-2.6 6.3-3.1c37.2-11.5 76.7-13.3 114.8-5.2C454.7 67.6 534 180.7 517.1 301.3c-8.4 62.6-38.6 112.7-87.7 151.4c-50.1 39.7-107.5 54.3-170.2 52.2l-24-1c12.4 2.8 25 4.9 37.6 6.3c40.7 4.2 81.4 2.1 120.1-12.5c94-35.5 149.3-102.3 162.9-202.5c4.8-52.6-5.8-105.4-30.8-152C454.6 11.3 290.8-38.4 159 32c-2.4 1.4-4.5 3.1-6.3 5.2zM309.4 433.9c-2.1 11.5-4.2 21.9-14.6 31.3c53.2-1 123.2-29.2 161.8-97.1c39.7-69.9 37.6-139.9-6.3-207.8C413.8 105 360.5 77.9 293.7 73.7c1.5 2.3 3.2 4.4 5.2 6.3l5.2 6.3c25.1 31.3 37.6 67.9 42.8 107.5c2.1 15.7-1 30.3-13.6 41.8c-4.2 3.1-5.2 6.3-4.2 10.4l7.3 17.7L365.7 318c5.2 11.5 4.2 19.8-6.3 28.2c-3.2 2.5-6.7 4.6-10.4 6.3l-18.8 8.4 3.1 13.6c3.1 6.3 1 12.5-3.1 17.7c-2.5 2.4-3.8 5.9-3.1 9.4c2.1 11.5-2.1 19.8-12.5 25.1c-2.1 1-4.2 5.2-5.2 7.3zm-133.6-3.1c16.7 11.5 34.5 20.9 53.2 26.1c24 5.2 41.8-6.3 44.9-30.3c1-8.4 5.2-14.6 12.5-17.7c7.3-4.2 8.4-7.3 2.1-13.6l-9.4-8.4 13.6-4.2c6.3-2.1 7.3-5.2 5.2-11.5c-1.4-3-2.4-6.2-3.1-9.4c-3.1-14.6-2.1-15.7 11.5-18.8c8.4-3.1 15.7-6.3 21.9-12.5c3.1-2.1 3.1-4.2 1-8.4l-16.7-30.3c-1-1.9-2.1-3.8-3.1-5.7c-6.4-11.7-13-23.6-15.7-37.1c-2.1-9.4-1-17.7 8.4-24c5.2-4.2 8.4-9.4 8.4-16.7c-.4-10.1-1.5-20.3-3.1-30.3c-6.3-37.6-23-68.9-51.2-95c-5.2-4.2-9.4-6.3-16.7-4.2L203.9 91.5c2 1.2 4 2.4 6 3.6l0 0c6.3 3.7 12.2 7.3 17 12.1c30.3 26.1 41.8 61.6 45.9 100.2c1 8.4 0 16.7-7.3 21.9c-8.4 5.2-10.4 12.5-7.3 20.9c4.9 13.2 10.4 26 16.7 38.6L291.6 318c-6.3 8.4-13.6 11.5-21.9 14.6c-12.5 3.1-14.6 7.3-10.4 20.9c.6 1.5 1.4 2.8 2.1 4.2c2.1 5.2 1 8.4-4.2 10.4l-12.5 3.1 5.2 4.2 4.2 4.2c4.2 5.2 4.2 8.4-2.1 10.4c-7.3 4.2-11.5 9.4-11.5 17.7c0 12.5-7.3 19.8-18.8 24c-3.8 1-7.6 1.5-11.5 1l-34.5-2.1z"/></svg>';
            break;
        case 'com.woltlab.wcf.generic21': // Discord
            icon = document.createElement("fa-brand");
            icon.innerHTML = '<svg slot="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>';
            break;
        case 'com.woltlab.wcf.generic23':
            icon = document.createElement("fa-icon");
            icon.setIcon("code", true);
            break;
        case 'com.woltlab.wcf.generic25':
            icon = document.createElement("fa-brand");
            icon.innerHTML = '<svg slot="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg>';
            break;
    }
    if (icon != undefined) {
        icon.size = 16;
        const linkChild = listItem.querySelector("a");
        linkChild.prepend(icon);
    }
}
				</script>

Display More

Das Ergebnis ist auf https://www.mta-sa.org ersichtlich.

Lantis · October 20, 2023 at 7:27 PM

Quote from Audifire

Das Ergebnis ist auf https://www.mta-sa.org ersichtlich.

Cool, danke! Ich würde allerdings die Schriftfarbe beim Hovern der Menüpunkte auf weiß setzen. Das ist ja kaum lesbar. Woher bekommt man denn die SVG Daten für Twitter (X) und YouTube etc. ?

Aze · October 20, 2023 at 7:49 PM

Quote from Lantis

Cool, danke! Ich würde allerdings die Schriftfarbe beim Hovern der Menüpunkte auf weiß setzen. Das ist ja kaum lesbar. Woher bekommt man denn die SVG Daten für Twitter (X) und YouTube etc. ?

Über icons8 z. B.

Audifire · October 20, 2023 at 7:51 PM

Quote from Lantis

Cool, danke! Ich würde allerdings die Schriftfarbe beim Hovern der Menüpunkte auf weiß setzen. Das ist ja kaum lesbar. Woher bekommt man denn die SVG Daten für Twitter (X) und YouTube etc. ?

Ich habe direkt den FontAwesome Inhalt vom WCF genommen und dort eingefügt.

DMedia · October 20, 2023 at 7:56 PM

Alternativ direkt von der Quelle:

Icons Icon | Font Awesome

Icons brand icon. Available now in Font Awesome 6.

fontawesome.com

Lantis · October 20, 2023 at 8:16 PM

Quote from Audifire

Ich habe folgendes in das Template pageHeader gepackt (nicht schön, aber selten ):
Das Ergebnis ist auf https://www.mta-sa.org ersichtlich.

Ich habe const mainMenuList = document.querySelector(".boxMenu");

entsprechend geändert. Funktioniert auch, nur wird das Untermenü damit leider nicht berücksichtigt. Füge ich davor oder dahinter ol li usw. ein, hat das leider keine Auswirkungen. Kannst du mir da bitte einen Tipp geben?

Audifire · October 21, 2023 at 12:42 AM

In deinem Fall würde der Aufbau wahrscheinlich so aussehen:

JavaScript

const menus = document.querySelectorAll(".mainMenu ol");
for (const menu of menus) {
  const listItems = menu.children;
  for (const listItem of listItems) {
    let icon = undefined;
    switch (listItem.dataset.identifier) {
      case 'com.woltlab.wbb.BoardList':
        icon = document.createElement("fa-icon");
        icon.setIcon("folder", true);
        break;
    }
    if (icon !== undefined) {
      icon.size = 16;
      const linkChild = listItem.querySelector("a");
      linkChild.prepend(icon);
    }
  }
}

Display More

Bei mir war der Need nicht da, weil ich mein Main-Menu nochmal manuell komplett neu aufgebaut habe.

Donner · November 5, 2023 at 11:36 AM New

Ich stehe gerade auf der Leitung, wo genau ich das Script dann in das pageHeader Template einfügen soll/muss. Es bleibt bei mir einfach wirkungslos bisher, obwohl ich die dataset.identifier passend angepasst habe.

Donner · November 6, 2023 at 2:50 AM New

Quote from Donner

Es bleibt bei mir einfach wirkungslos bisher

Okay, hat sich erledigt. Ich hatte letztlich einen falschen querySelector.

VAROZ · November 6, 2023 at 8:49 AM New

Code

.mainMenu .boxMenu > li > a[href="/forum"]::before {
	content: '\f015';
	font-family: 'Font Awesome 5 Free';
	font-size: 20px;
	font-weight: 900;
	margin-right: 5px;
	color: #fb4553;
}

Wieso wilde Templateanpassungen?

SoftCreatR · November 6, 2023 at 9:06 AM New

1. Weil kein fa5 zum Einsatz kommt

2. Weil im wsc6 keine webfonts verwendet werden

Geronimo · November 6, 2023 at 9:09 AM New

Könnte man die Bilder nicht auch einfach als SVG abspeichern und die Menüeinträge per CSS formatieren? Da kannst doch drauf warten, dass das ansonten bei einem der nächsten Updates wieder zerbricht, und die Suite irgendwelche Fehler ausspuckt.

SoftCreatR · November 6, 2023 at 9:28 AM New

Die Icons liegen als SVG vor. Wir machen das schon seit je her so.

RainerSF · November 6, 2023 at 9:40 AM New

Quote from SoftCreatR

Die Icons liegen als SVG vor. Wir machen das schon seit je her so.

kommt das doch was von dir?

SoftCreatR · November 6, 2023 at 9:43 AM New

Quote from RainerSF

kommt das doch was von dir?

Ich habe bereits angekündigt, dass wir das Plugin vermutlich nicht weiter entwickeln werden.

RainerSF · November 6, 2023 at 10:02 AM New

Quote from SoftCreatR

Ich habe bereits angekündigt, dass wir das Plugin vermutlich nicht weiter entwickeln werden.

Deshalb die Frage hier, da ja durchaus andere Sichtweisen und Erkenntnisse möglich sind! Und vermutlich lässt ja alle Optionen offen!

mystery2072 · November 6, 2023 at 10:30 AM New

Quote from SoftCreatR

Die Icons liegen als SVG vor. Wir machen das schon seit je her so.

und wie kann man die als css im Style einbauen für WSC6

Devon · November 6, 2023 at 10:34 AM New

Laut docs gar nicht, am besten über Javascript oder halt direkt in HTML.

Font Awesome im Menü?

Participate now!

Similar Threads

Brand-Icons in Icon-Auswahl nutzen

Sortierung: Dynamisches Font Awesome-Icon

Vorbereitungen auf Update von WoltLab Suite 3.1 auf 5.2

Genaue deklaration für acpMenu.xml Icons

Themen Ersteller Markierung

Users Viewing This Thread