Bestehende Font Awesome erweitern

  • Hallo Leute,

    sorry aber ich check es einfach nicht. Mein Template nutzt Font Awesome und ich würde gern weitere Icons in meinem Hauptmenü nutzen. Habe mir jetzt schon ein paar Anleitungen angesehen, allerdings scheinen diese nicht für mich zu zutreffen. Diese hier zum Beispiel bezieht sich ja auf Einbindung in ein HTML Element(eigenes Modul) oder? Bei mir ist ja schon alles vorinstalliert und die font-awesome.css vorhanden. Nur wie kann ich weitere Icons hinzufügen?


    LG und Danke

  • Versteh die Frage nicht wirklich, weil du ja schon Icons hast. Du hast ein Menü "Videos" mit Icon. Für das hast vermutlich "fa-film" als "CSS-Klasse für Link" im Menüeintrag eingetragen. Die Klassen findest auf der Seite von fontawesome (musst aber auf die Font-Version achten) oder der Template-Anbieter ist so nett, irgendwo eine Übersicht anzuzeigen.

  • Hallo, ja die bestehenden kann ich auch ganz einfach hinzufügen wie Re:Later schon erkannt hat. Jetzt möchte ich aber ein anderes hinzufügen, welches im Template nicht inbegriffen ist. Zum Beispiel DIESES hier.


    Ich habe jetzt der font-awesome.css folgendes hinzugefügt.


    Code
    .fa-kaaba:before {
    content: "\f66b";
    }

    Jetzt wird mir zwar etwas angezeigt, aber nur das Sympol für das nicht gefundene Symbol.

  • Ja, du verwendest Version 4, wie man in der http://2019.vnv-urbex.de/templ…_128/css/font-awesome.css sehen kann

    Code
    /*!
    
     *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
    
     *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
    
     */

    Kurz: Der Font-Link im Template-Manual wurde nicht aktualisiert/stimmt nicht mehr, weil FA die Übersicht für Version 4 woanders hin verschoben hat.

  • Fontawesome 4.7 ist hier gehostet:https://fontawesome.com/v4.7.0/

    Die 5er zu installieren würde ic hDir abraten, außer es sind Icons verfügbar welche Du unbedingt benötigst.
    Grund ist die veränderte Klassenstruktur. Du kannst Davon ausgehen das dann Deine bisherigen icons nicht mehr funktionieren.

    Auch gibt es jetzt eine free und Pro Version. Das sollte man nicht vergessen wenn man sich Icons raussucht.


    Grüße

  • Hallo, ja da gibt es schon passendere Icons. Die schon bestehenden kann ich ja dann wechseln.

    Allerdings bekomme ich die neue Version nicht installiert. Normal muss ich ja nur den Schritt "Using Web Fonts with CSS" ausfüheren. Den Code muss ich sicher in die index.php meines Templates einführen.


    Code
    <head>  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet"> <!--load all styles -->
    </head>
    <body>  <i class="fas fa-user"></i> <!-- uses solid style -->  <i class="far fa-user"></i> <!-- uses regular style -->  <i class="fal fa-user"></i> <!-- uses light style -->  <!--brand icon-->  <i class="fab fa-github-square"></i> <!-- uses brands style -->
    </body>

    Den Teil im head kommt in den head und der andere in den Body, allerdings gibts kein <body> in meiner index.php.


    Also ich würde schon gern die neue installieren, aber ich steig da echt nicht durch.


    LG

  • So ganz kann ich dir nicht folgen.

    Warum soll im Body-Tag der index.php etwas eingetragen werden. Diese würde dann immer an der Stelle angzeigt.

    Du willst nur an ausgesuchten Stellen die entsprechenden Zeichen haben, dann müssen dürfen die auch nur an den Stellen definiert werden.

  • Und hast du denn den Ordner schon richtig angelegt (runtergeladen, im Temlate-Ordner entpackt) und dann "your-path-to-fontawesome" auf diesen Ordner umgeschrieben?


    Außerdem sind Konflikte anzunehmen, wenn beide Font-Versionen noch vorhanden sind bzw. durch irgendein CSS angesprochen werden. Dafür kennen wir aber das Template zu wenig, um sagen zu können wie das die alten Fonts lädt etc.

  • Also ich habe jetzt...


    Dies meiner Template index.php hinter <head> eingefügt

    Code
    <link href="/templates/joomspirit_128/css/all.css" rel="stylesheet"> <!--load all styles -->

    Alles css Dateien aus dem Awesome Archiv(Ordner CSS) in den Template CSS Ordner kopiert.


    Den Ordner Webfonts aus dem Awesome Archiv in mein Template kopiert.


    Dann habe ich noche folgende Zeile in der index.php meines Templates gefunden und gelöscht.

    Code
    $doc->addStyleSheet($filepath.'/css/bootstrap.css' , 'text/css', 'all');
    $doc->addStyleSheet($filepath.'/css/font-awesome.css' , 'text/css', 'all');
    $doc->addStyleSheet($filepath.'/css/template.css' , 'text/css', 'all');

    Ich habe die alte fonts-awesome.css und den fonts Ordner gelöscht.


    Bis dahin kein Erfolg, außer dass halt die alten Icon nimmer funktionieren, was ja klar war.

  • Hallo Leute, Danke für eure Hilfe bis hierher. Ich glaube es ist besser, wenn ich die alten Icons lasse und stattdessen sparsam mit diesen umgehe. So kann ich auch besser bestimmte Menüpunkte hervorheben. Wäre sicher eh nen bissel übertrieben. Vielleicht schreib ich mal dem Template Support, ob die das updaten.


    Vielen Danke euch ;) und schönes WE