Verwendung: Erweiterung des Icon-Fonts

Eugen's Avatar

Eugen

13 Jan, 2018 02:31 PM

Produkt: Tao Newsletter- & Print-Templates Contao
Contao-Version: 4.4.12
Browser und Browserversionen: Aktuellste von Chrome/Firefox/Safari

Hallo.

Ich versuche gerade von Contao 3.5 auf Contao 4.4 zu migrieren. In der 3.5 Installation nutze ich einen erweiterten Satz an Icons (wie unter https://rocksolidthemes.com/de/contao/blog/iconfont-anpassen-icons-... beschrieben). Bei der Umstellung auf Contao 4.4 gelingt es mir aktuell nicht, einen erweiterten Icon-Satz zu installieren. Neue Icons werden abhängig vom Browser als leeres Feld oder in Form "E901" angezeigt (Icon-Browser). Auf der Homepage erscheint dann nur ein Rechteck, statt Icon.

Ich habe versucht, die CSS Datei, sowohl in den fonts-Ordner (rocksolid-icons.css) als auch in den css-Ordner (icons.css) abzulegen. Ist die Erweiterung des Icon-Fonts unter Conato 4.4 nicht mehr möglich, oder übersehe ich noch etwas?

Mit besten Grüßen

Eugen Richter

  1. Support Staff 1 Posted by RockSolid Theme... on 15 Jan, 2018 07:43 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Für den Austausch des Icon-Fonts gibt es zwischen Contao 3.5 und Contao 4.4 keine Unterschiede. Stellen Sie bitte sicher, dass Sie die Schriftdateien unter files/tao/fonts ersetzt haben. Eventuell hilft es auch den Cache des Browsers zu leeren bzw. diesen neu zu starten falls eine ältere Version der Schriftdatei sich im Cache befindet.

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  2. 2 Posted by Eugen Richter on 15 Jan, 2018 08:54 AM

    Eugen Richter's Avatar

    Danke.

    Das Problem lag in der Tat im Cache des Browsers.

  3. 3 Posted by Marco Langshaus... on 01 Feb, 2018 11:27 AM

    Marco Langshausen's Avatar

    Hallo ...
    ich habe ebenfalls ein Problem mit meiner angepassten Rocksolid-Icons Font.
    Ich habe testweise mal ein neues Icon mit IcoMoon nach der Anleitung hinzugefügt.
    Im Icon-Picker wird mir das neue Icon angezeigt und ich kann es auch nutzen.

    Wenn ich allerdings den CSS-Tag für das Icon in der Seitenstruktur eingebe wird dieses Icon nicht als Menu-Icon angezeigt. Mit den alten Icons (z.B. icon-home) funktionert es ohne Probleme und das neue Icon ist in der Datei rocksolid-icons.css ebenalls aufgeführt.

    Könnt Ihr mir sagen was ich hier noch falsch mache?

    Danke und beste Grüße! :-)

  4. Support Staff 4 Posted by RockSolid Theme... on 01 Feb, 2018 01:36 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  5. 5 Posted by Marco Langshaus... on 01 Feb, 2018 03:18 PM

    Marco Langshausen's Avatar

    Hallo und vielen Dank für die schnelle Rückmeldung.

    Die betroffene Seite ist meine Webseite http://www.eifel-dj.info

    Dort habe ich unter dem Menüpunkt "Equipment" bei den diversen
    Menüpunkten in der Seitenstruktur unter CSS-Klasse die entsprechende
    Klasse des Icon eingetragen.

    In meiner Datei rocksolid-icons.css steht auch folgender Eintrag:
    .icon-church:before {
       content: "\e900";
    }

    Leider wird jedoch beim Menüpunkt "Test" kein Icon für diesen Menüpunkt
    angezeigt.

    Auf dem WebServer habe ich im Ordner Fonts folgende Dateien aus dem
    icomoon.zip reingelegt:
    /files/oneo/fonts/rocksolid-icons.css
    /files/oneo/fonts/rocksolid-icons.eot
    /files/oneo/fonts/rocksolid-icons.svg
    /files/oneo/fonts/rocksolid-icons.ttf
    /files/oneo/fonts/rocksolid-icons.woff

    Im Anhang befindet sich ebenfalls noch die ZIP-Datei dieser Dateien.

    Bei weiteren Fragen können Sie sich gerne jederzeit an mich wenden.

    Viele Grüße! :-)

  6. Support Staff 6 Posted by RockSolid Theme... on 02 Feb, 2018 08:52 AM

    RockSolid Themes's Avatar

    Bitte fügen Sie die CSS-Codes der neue Icons auch in die Datei
    files/oneo/css/icons.css ein. Diese Datei wird für die Darstellung im Frontend verwendet. Die rocksolid-icons.css-Datei im fonts-Ordner wird für den Icon-Picker im Backend genutzt.

  7. 7 Posted by Marco Langshaus... on 02 Feb, 2018 02:23 PM

    Marco Langshausen's Avatar

    Hallo liebes Suppport-Team ...

    vielen Dank für die super schnelle Hilfe.
    Funktioniert nun einwandfrei wenn ich die neuen Icons in die icons.css
    aufnehme.

    Habe nun noch eine letzte Frage ... im Oneo Template wird ja der
    gewählte Menüpunkt oben als Überschrift angezeigt.
    An welcher Stelle (CSS / Template) muss ich hier etwas anpassen um vor
    der Überschrift ebenfalls das in der Seitenstruktur (CSS-Klasse) Icon
    angezeigt zu bekommen?

    Vielen lieben Dank und beste Grüße! :-)

  8. Support Staff 8 Posted by RockSolid Theme... on 02 Feb, 2018 02:48 PM

    RockSolid Themes's Avatar

    Bearbeiten Sie dafür bitte unter „Layout › Themes › Oneo Frontend-Module“ das Modul „Breadcrumbs Headline“ und ersetzen Sie den HTML-Code mit folgender Zeile:

    <h3 class="breadcrumbs-headline {{page::cssClass}}">{{page::pageTitle}}</h3>
    

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • rocksolid-icons.zip 1.25 MB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac