XF2.x [cv6] Node Icons 1.1.0 RC

Eigene Icons für alle Nodes und Kategorien.

  1. Hoffi

    Hoffi !important Lizenzinhaber

    Hoffi hat eine neue Ressource erstellt:

    [cv6] Node Icons - Eigene Icons für alle Nodes und Kategorien.

    Weitere Informationen zu dieser Ressource...
     
    Masetrix, SteffenR und McAtze gefällt das.
  2. Hoffi

    Hoffi !important Lizenzinhaber

    McAtze gefällt das.
  3. Teralios

    Teralios Bekanntes Mitglied Lizenzinhaber

    Schon mal eine schöne Idee: Würde die aber noch empfehlen ein Overlay für die FontAwesome-Icons zu entwerfen, was die Bedienung vereinfacht.
     
  4. Hoffi

    Hoffi !important Lizenzinhaber

  5. Hoffi

    Hoffi !important Lizenzinhaber

    Ich finde die eigentlich immer nur nervig. Ich hab extra in die Beschreibung ein Link zu FA eingebaut.
     
  6. Teralios

    Teralios Bekanntes Mitglied Lizenzinhaber

    Ja und nein:

    Die Beschreibung ist durchaus gut, aber bedingt, dass XenForo wirklich auch die Icons installiert. Zudem muss man in deinem Fall, wenn man später mal was bearbeitet, auch noch mal nach schlagen, welches Icon da nun wirklich ist. Eventuell kannst du ja eine "Anzeige" einbauen, dass man das sofort erfasst.

    Zudem: Wäre durchaus gut, wenn du es möglich machst auch den Icon-Stil auszuwählen.

    Und eventuell auch ein Icon für Ungelesen, da kann man nämlich mit fas und far echt gut arbeiten.
     
  7. Hoffi

    Hoffi !important Lizenzinhaber

    Einfach die Klasse mit eingeben. Nehme ich in die Doku mit auf.
    Wenn du "fad fa-dice" eingibts, wird die dual-tone Version genommen. Nutze ich bei mir im Forum.

    Ungelesen wird standardmässig mit einer anderen Farbe dargestellt bei den Icons. Bei images setze ich das auf eine halb-transparenz.

    Da mein Fokus hier primär auf SVG und FA liegt, halte ich das unread icon für einen overhead.
     
  8. Teralios

    Teralios Bekanntes Mitglied Lizenzinhaber

    Nun ein Alternatives Icon bietet sich da auch an, weil man auch mit den Stilen arbeiten kann, was auch echt schick aussieht, musst du aber wissen.
     
  9. Hoib3rgA

    Hoib3rgA Bekanntes Mitglied Lizenzinhaber

    Hy Hoffi,
    danke für dies tolle, und einfach zu bedienende Hilfsmittel!

    Eine kleine Frage hätte ich dazu:
    Man kann die Icons, durch hinzufügen von diversem Code, anpassen.
    So kann man das Icon z.B. rotieren lassen ... oder auch die Farben (Dualtone) anpassen.
    Nachdem man nur rein den "Icon Namen" eingibt, funktioniert das mit der Codeanpassung leider nicht ... sofern dieser Code nicht direkt beim Namen steht.
    Beispiel:
    Rotation funktioniert ...
    Code (Text):

    <i class="fas fa-sync fa-spin"></i>
     
    Wird der Iconname getrennt vom folgenden Code angegeben, wird das Icon nicht mehr angezeigt
    Code (Text):

    <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>
     
    Wenn man auf Fontawesome ein Icon gefunden hat, kann man ja einfach auf den "Codeschnipsel" klicken, und der komplette Code wird in die Zwischenablage kopiert.
    Würde es Sinn machen, bzw. wäre es möglich, das AddOn so zu gestalten, dass man einfach den Code in dieser Form eingibt:
    Code (Text):

    <i class="fas fa-sync"></i>
     
    Vermutlich könnte man dann auch die anderen Classen nutzen?

    Gruß Chris
     
  10. Hoffi

    Hoffi !important Lizenzinhaber

    Alles was im Bereich Klasse steht, kannst du einfügen.

    Den ganzen HTML einfügen, werde ich nicht bauen, das ist eine Potentielle Schwachstelle mit der zu viel kaputt gehen kann wenn man das falsch bedient.

    Die Farben bei Dualtone anpassen geht nicht direkt, da es keine Klassen sind. (Siehe weiter unten wie das geht).

    Was geht:
    • fas
    • fad
    • fal
    • fab (für branded)
    • fa-spin
    • fa-pulse
    • fa-swap-opacity

    Willst du die einfärben, ist das wie folgt möglich:
    Erstelle eine Klasse in einer .less Datei deiner Wahl (extra.less, oder einer eigenen die du per TemplateMod an die core.less anhängst).

    Code (CSS):
      .my-iconclass {
        --fa-primary-color: darkgreen;
        --fa-secondary-color: silver;
      }
    Und dann einfach in das Feld noch my-iconclass hinzufügen.
     
    Zuletzt bearbeitet: 21. Mai 2021
    Hoib3rgA und otto gefällt das.
  11. Hoib3rgA

    Hoib3rgA Bekanntes Mitglied Lizenzinhaber

    ja gut, das leuchtet ein.
    Danke für die Erklärung, wie man es dennoch realisieren kann.

    Gruß Chris
     
  12. Hoffi

    Hoffi !important Lizenzinhaber

    Aber du hast mich auf eine Idee gebracht, ich werde kleine Bonusfunktionen einbauen und etwas mehr Erklärungstext.
     
    Hoib3rgA und otto gefällt das.
  13. Hoffi

    Hoffi !important Lizenzinhaber

    Was haltet Ihr von sowas?

    upload_2021-5-22_18-8-31.png
     
    McAtze, otto und Hoib3rgA gefällt das.
  14. Hoib3rgA

    Hoib3rgA Bekanntes Mitglied Lizenzinhaber

    das ist MEGA!
    Sehr einfach gehalten, ich finds gut

    Gruß Chris
     
  15. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Sehr nice und Anwenderfreundlich noch dazu. :)
     
  16. Hoffi

    Hoffi !important Lizenzinhaber

    OK, dann setz ich das mal in meine Queue. Die Optik steht ja fast, fehlt nur noch das JavaScript.

    Das wird dann der Start meiner CoreLib sein, da ich dies FA Feld in diversen AddOns nutze.
     
    Hoib3rgA und McAtze gefällt das.
  17. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Bitte hier noch eine Phrase hinzufügen:
    upload_2021-6-8_19-8-19.png
    Grund: im deutschen sprechen wir ja von "Elementen" statt von "nodes" - folglich würde ich das hier gern mit Element Icons übersetzen um nicht abzuweichen.
    Und gleich eine erste Frage; die Größe des Icons in Pixel, betrifft das sowohl width als auch height oder nur eines von beiden? Denke mal beides :)

    Weiter...
    upload_2021-6-8_19-12-47.png
    Gäbe es hier irgendwie ne bessere Möglichkeit die Breite und Höhe vorzugeben? Ich mein Pagespeed und Konsorten bemängeln gern wenn Bilder keine festen Größen zugewiesen bekommen haben. max_height und max_width zählen dabei halt nicht als fix (was ja korrekt ist).
    Ich weiß, mancher wird gern breitere oder schmalere Icons nutzen wollen also nicht quadratische, aber wäre es zugunsten SEO eventuell nicht sinnvoller auf ein einstellbares fixes Quadrat-Maß mit fixer height und width Angabe zu setzen? Stichwort CLS (Cumulative Layout Shift).
    Oder als Option, sich entscheiden zu können ob man quadratische Icons oder unegale nutzen möchte?
    Oder übertreibts hier Google und co und ich mach mich sinnlos zum Ei gerade? :D ;)
     
  18. Hoffi

    Hoffi !important Lizenzinhaber

    Für die nächste Version vorgesehen.
    Hier kommt mal wieder die beste Antwort:
    It depends. :D
    Aber ja in der Regel beides.

    Du kannst das CSS anpassen wie du es brauchst, ich habe das bewusst nicht vorgegeben und eine größere Flexibilität zu haben.

    Ich habe sogar unterschiedliche Größen je Style.

    An SEO hatte ich dabei keine Sekunde verschwendet, das ist bei mir nicht (mehr) im Fokus.

    Du kannst ja einfach das CSS entsprechend anpassen, die IconSize wird an vielen Stellen verwendet, zum Teil auch als feste width.

    Ich kann nicht mit festen Werten arbeiten. Wenn ich das mal wieder anfasse denke ich mal drüber nach ob ich eine flexiblere Lösung finde.
     
    otto gefällt das.
  19. otto

    otto Bekanntes Mitglied Lizenzinhaber

    Ja, in der less einfach die Angaben anpassen und fertig. Wobei das eventuell dann im Mobile-Mode Probleme machen könnte. Selbes Dilemma bei den Informationen - ohne max_width und max_height gehts eigentlich nur, wenn man im Template einzelne fixe Größen anhängig von der Bildschirmbreite vorgibt, was die Sache gleich wieder komplexer macht.
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden