ZP14 > Layout Top >Font Awesome Icons & Shariff

  • Hallo Zeta,


    ich glaube, ich habe da eine Kleinigkeit entdeckt, die vielleicht ausgebessert werden könnte.


    Auf einem frisch angelegten Projekt, Layout Top, sind in den Linkboxen Icons. Im Bereich Zusatz Links habe ich ebenfalls ein drin.




    Nun ist es so, dass wenn ich das Widget Shariff einfüge, ändert sich die Icons in den Linkboxen und bei den Zusatzlinks ist das Icon auf leeren Seiten vorhanden und wenn Shariff drauf ist, ist das Icon aus den Zusatz-Links auf einigen Seiten vergrößert und auf machen anderen Seiten verschwunden.




    Ich hoffe, mein Anliegen ist verständlich.

    Projekt ist keins online, aber schnell erstellt. :-)

    lg

  • Verstehen ich das Problem richtig, dass die Icons, die vor dem Einfügen des Shariff-Widgets schon sichtbar waren, nach dem Einfügen des Widgets leicht vergrößert dargestellt werden?

  • 🤔


    Ja. Und im Bereich "zusätzliche Links" verschwindet das Icon nach dem Einfügen des Shariff Widgets.


    Lg

  • Hätte ich ein Bild machen sollen, wo nichts zu sehen ist?


    Ist das nicht nachzustellen?


    Mit dem Handy kann ich jetzt schlecht helfen.


    neues Projekt erstellen... Layout Top wählen und das Widget einfügen und probieren sind 1 bis zwei Minuten. Das Verhalten sollte dann auffallen.


    Das Problem an solchen Problemchen ist immer, dass die mitten in irgend welchen halbfertigen Projekten auftauchen. Und dann versucht man den Fehler an neuen Projekten zu neu zu erzeugen um diese dann hier im Forum zu erklären.


    Die Shariff Geschichte verwendet doch auch die font awesome Icons die ohnehin bereits im Layout Top integriert ist oder nicht? Wenn das nicht der Fall ist, verzichte ich lieber auf Shariff und alles ist gut.


    Lg

  • Hallo Stefan,


    könnte eventuell an unterschiedlichen Einstellungen und Versionen von Awesome liegen. Über die bundle.css des Layouts wird die Awesome-Version 4.7.0 geladen, die shariff.complete.css nutzt hingegen Awesome 5.0.5.


    Nachfolgend nur an drei Beispielen die Unterschiede in den Parametern der beiden CSS:

    bundle.css shariff.css
    vertical-align 15% 0.667em
    fa-xs nicht vorhanden .75em
    fa-sm nicht vorhanden .875em


    Hier zeige sich also tatsächliche Unterschiede in den Größenangaben. Da die shariff.css nach der bundle.cs gelanden wird, dürfte diese die Einstellungen überschreiben.

  • Steffen T. ,


    Die Font Awesome 4.7 ist ja Bestandteil von Layout Top.


    Ich könnte zwar die aktuelle 5er einbinden, hätte dannaber alles doppelt.


    Wird die 4.7 durch eine aktuelle ersetzt?

    Oder kann die gar entfernt werden, so könnte ich dann selber entscheiden.


    Offensichtlich hat Zeta keinen Einfluss auf die css von Shariff.

  • Wir können den Fehler sicher finden und beheben, dazu müssen wir das Problem aber erst korrekt verstehen (bevor wir es nachstellen). Das ist halt manchmal nicht so leicht, z.B. wenn ich lese, dass ein Icon an einer Stelle fehlt, der zugehörige Screenshot das Icon aber zeigt… Also, bitte etwas Geduld. Wenn wir nachfragen, dann nicht um zu nerven, oder abzuwehren, sondern nur um zu verstehen. Ich untersuche das dann am Montag genauer.

  • Kein Problem.
    Sorry, wenn ich etwas zu direkt rüber gekommen bin.


    Werde künftig nach Möglichkeit ein paralleles Projekt laufen lassen, welches ich auf dem Zeta Test-Server laufen lasse. Ist wohl auch für Zeta zum Verständnis besser. Oder?

  • Hallo Stefan S & Andre G. ,


    habe das eben mal nachvollzogen:

    1. Neues Projekt "TOP Responsive Data" angelegt
    2. unter "Einstellungen" -> "Links" den 4. Zusatzlink mit der Seite "Features" verknüpft und als angezeigter Name <i aria-hidden="true" class="fa fa-cog"></i> für das Zahnrad (kopiert aus der Überschrift zu Linkbox "Features") eingegeben. In den Zusatzlinks taucht das Zahnrad auf.
    3. "Shariff" auf der Startseite eingefügt. Damit vergrößern sich die Symbole in den 3 Linkboxen und auch das Symbol bei den Zusatzlinks.
    4. Durchblättern sämtlicher anderer Seiten, das Zahnrad in den Zusatzlinks ist auf allen Seiten vorhanden, wird aber nur auf der Startseite (mit Shariff) vergrößert dargestellt.
    5. Ausblenden von "Shariff": Symbole gehen wieder auf Schriftgröße zurück, sowohl in den Linkboxen als auch in den Zusatzlinks. Zahnrad ist in den Zusatzlinks aller Seiten vorhanden

    soweit scheint die Größenanpassung der Symbole tatsächlich über die Einträge in der bundle.css (vom Layout) und der shariff.css (vom Widget) zu liegen.


    Verschwinden von Symbolen:


    1. unter Font Awesome in Version 5.0.0 wird als Code für das Zahnrad <i class="fas fa-cog"></i> angegeben. Dies ist ein anderer Code als in der Überschrift zur Linkbox "Features".
    2. Ich trage diesen Code anstelle des bisherigen Codes als Name für den 4. Zusatzlink ein.
    3. Das Zahnrad verschwindet auf allen Seiten aus den Zusatzlinks
    4. Ich blende auf der Startseite das Widget "shariff" wieder ein: Das Zahnrad erscheint leicht vergrößert in den Zusatzlinks. Die Symbole in den Linkboxen sind ebenfalls leicht vergrößert.
    5. Auf allen anderen Seiten wird das Zahnrad in den Zusatzlinks nicht angezeigt.


    Ursächlich dürfte sein, dass in den Versionen 4 und 5 unterschiedliche Codes zum Aufruf der Symbole verwendet werden, was zu den vorgenannten Problemen führt. Lösungsdetails überlasse ich dann doch lieber den Programmierern ;).

  • Hanabi ,


    danke für Deine ausführliche und vorbildliche Erklärung einer Fehlermeldung zu meinen zwei Bildern. :-)


    lg und noch einen schönen 1. Advent.

  • So, Online-Update ist raus und sollte in ca. 30 min. verfügbar sein.

    Alles was das Shariff-Widget an Font Awesome CSS-Regeln definiert, ist jetzt mit .shariff geprefixed, damit sich das nur auf das Widget selbst auswirkt und keine anderen Inhalte.

  • Eine Frage habe ich aber noch!

    Wenn zwei Versionen der Fonts (4.7 & 5.0) geladen werden, wie wirkt sich das auf die Leistung der Page aus? Ich meine, ist ja nicht gerade wenig Code oder?
    Ich frage nur aus Interesse. :-)