Eigenes Fonticon einbinden

  • Hallo,


    ich bau gerade lokal (Xampp) eine neue Homepage und verwende dazu das "Favourite Template".
    Das Template benutzt Icon von Font Awesome und in Joomla wird ja Icomoon verwendet.


    In dem Template gibt es die Möglichkeit, die Module mit FontIcons, Rahmen usw. zu versehen. Diese Icons werden wie erwähnt von Font Awesome bereit gesetllt.


    Da ich die Homepage für meinen Verein baue, möchte ich gerne diese Icons (Modulvariationen) gegen das Vereinslogo austauschen, welches ich bei Icomoon als *.svg hochgeladen und
    als Iconfont heruntergeladen habe.


    Die Font-Files von Icomoon, wie auch die *.css habe ich in den Ordnern vom Template angelegt, genauso wie die von Fontawesome.
    Auch habe ich die "src url" angepasst:

    Code
    @font-face {font-family: 'icomoon';src:url('../../icons/font/icomoon/icomoon.eot');src:url('../../icons/font/icomoon/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../../icons/font/icomoon/icomoon.woff') format('woff'), url('../../icons/font/icomoon/icomoon.ttf') format('truetype'), url('../../icons/font/icomoon/icomoon.svg') format('svg');}@font-face {    font-family: 'icomoon';    src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAQoYAgICAQYB .... AAYkEAAGjBAABrAQAAaAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype');    font-weight: normal;    font-style: normal;


    Wenn ich nun über den Firebag die class von einem Font Awesome Icon gegen meine vergebene class von Icomoon austauche, wird das Icon nicht angezeigt ...


    Bei den classen irritiert mich aber die einzelnen Pfade und auch die einzelnen content Angaben, also z.b.



    Wo habe ich ein Denkfehler? ?(


    Ich hoffe jemand kann mir helfen! :/


    Vielen Dank und viele Grüße!

  • Hallo Anka,


    danke schonmal für eine Antwort :)


    Naja das ist leider auch so ein Problem. Es ist lokal also über Xampp auf meinem PC, da noch zu viele Sachen am Template gemacht werden muss ... :(


    Ich würde es nochmal versuchen zu erklären...


    In dem Template von FavThemes, welches ich verwenden möchte, werden Icon-Fonts von "Font Awesome" verwendet. Welche ich über das Backend bei den Templateparametern ändern kann.
    Zusätzlich zu diesen bereits enthaltenen Icons möchte ich gerne ein eigenes Icon hinzufügen und auch später verwenden.


    Bei Icomoon habe ich daher über die App ein Icon-Font generiert. Dazu habe ich ein SVG erstellt, hochgeladen und anschließend das generierte Icon-Font heruntergeladen. Folgende Dateien bekomme ich dann von Icomoon bereitgestellt:
    Die Dateien rechts, sind in dem Fonts-Ordner enthalten ...


    Die Ordnerstruktur von meinem Template sieht so aus:
    (Der css-Ordner ist oben, der icons-Ordner geht nach rechts, und der font-Ordner nach ganz rechts.)


    Die fonts-Dateien von Icomoon habe ich in einen erstellten Icomoon-Ordner innerhalb meines Template eingefügt. Die "style.css" von Icomoon habe ich in den css-Ordner in dem icons-Ordner vom Template eingefügt.


    In die css vom Template habe ich den @font-face Code eingefügt und die Urls der Ordnerstrucktur angepasst.
    Auch habe ich das class-Element in die css vom Template eingefügt und dem neuen Icon-Font von Icomoon angepasst.


    Wenn ich nun aber über die Entwicklertools in FF oder Chrome die class von einem Icon anpasse auf meine vergebene passiert das:


    Also kurz um, die Fontfamily wird erkannt, allerdings wird nicht die css von meinem neuen Icon-Font angesprochen. Auch wenn ich diese in meine css vom Template integriere.


    Vielleicht würde mich nur n Tipp helfen, bzw. wie ich aus diesem Code-Ausschnitt die ".path"-Elemente oder die ganzen "content"-Elemente zum anzeigen bekomme. :)


    Ich hoffe die Erklärung war nun nicht zu umfangreich und es reicht für einen Tipp... :(


    Vielen Dank schonmal und viele Grüße!

  • Schonmal Danke für den Tipp!


    In der template.css habe ich es angepasst. Allerdings ändert sich nix. :(


    Auch habe ich die icomoon.css komplett deinem Vorschlag angepasst. Das gleiche. :(


    Ich bin ratlos ...

  • In der index.html, die mir icomoon für ein Demo zur Verfügung gestellt habe, habe ich noch diesen Code:

    Code
    <i class="fg-wappen">
                    <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"> ..... <span class="path471"></span><span class="path472"></span><span class="path473"></span><span class="path474"></span><span class="path475"></span>
                    </i>


    Wenn ich diesen über die Entwicklerkonsole gegen die vorhande austausche, wird dieses Symbol angezeigt.


    Würde ich nun darauf schließen, dass ich die path-classen noch in die index.php einfügen muss, allerdings kann das Icon nicht gelesen werden, oder?!

    • Hilfreich

    Im CSS im Firebug kontrollierst du, ob das Zeichen eingebunden wird.


    Thema relative Pfade. Deine Aufgabe besteht auch darin, den Font hochzuladen und die Pfade richtig anzupassen, so dass der Font auch gefunden wird.


    ../../icons/font/icomoon/


    muss dem selbst gewählten relativen Pfad weichen


    z.B.


    ../fonts/


    wenn unter templates/meintemplate/fonts/ sich die Font-Dateien befinden und die css-Datei in diesem Fall in templates/meintemplate/css/ liegt.

  • Ein Traum, Vielen Dank! :)


    Ich hab die Pfade nochmal kontrolliert und musste sie wirklich korrigieren ... :)


    Hättest Du eventuell noch einen Tipp für mich, wie ich die classen in die index.php einbauen kann?


    Code
    <i class="fg-wappen">                <span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span><span class="path10"> ..... <span class="path471"></span><span class="path472"></span><span class="path473"></span><span class="path474"></span><span class="path475"></span>                </i>


    So sieht die index.php bei mir aus:


  • Sorry, das kann ich nicht. Es fehlt ein Link zur realen Seite.


    ^ Mit so Code-Fragmenten von irgendeiner Stelle im Template oder der index.php kann man nichts anfangen. Jedes Template ist etwas anders gestrickt, viel wichtiger ist aber noch: Viele Darstellungsprobleme erfordern Eingriffe per CSS.


    Wenn der Header von deinem Template in einem Modul vom Typ "Eigene Inhalte" drin ist, kannst du ja dort das Bild entfernen und das HTML rein pasten.

  • Ok!
    Vielen vielen Dank trotzdem für deine Hilfe! :)


    Dann probier ich es mal selber zu finden. ^^


    Aber nur noch zum Verständnis für mich folgende Nachfrage (Wenn Nachhilfe ok ist :/ )


    In den oben aufgeführten PHP-Code sind das,

    PHP
    class=" <?php if ( $mainbottom == 1 ):echo ('span3'); elseif ( $mainbottom == 3 ):echo ('span3'); elseif ( $mainbottom == 4 ):echo ('span3');


    ,ich nenne es mal "Wenn" Abfragen. Sprich, wenn ich im Backend mainbottom 1 einstelle, dann soll "span3" geladen/angezeigt werden oder?


    Und diese Zeile

    Code
    <jdoc:include type="modules" name="mainbottom2" style="icon" />


    heißt, dass ein Modul mit dem Namen mainbottom 2 und dem Style Icon eingesetzt wird. Was ich wiederum über das Backend aktiviere.


    Ist das richtig?

  • Ja, das ist schon richtig, geht nun über die Frage hinaus.


    In deinem Schnipsel werden zwei Modulpositionen in zwei Grid-Reihen geladen, deren Breite man im Template wird einstellen können. Dann noch viel Spaß beim suchen.