ZP14 > Layout Top >Font Awesome Icons & Shariff

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?

Auf dem 2. Screenshot ist es da aber noch zu sehen.

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:

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.

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.

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 .

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.

Es werden halt nochmals Webfonts geladen. Sollte aber kein großer Performance-Faktor sein.