Bei Nutzung der Awesome Icons ändert sich die Schriftart

    Hallo,


    bei meinem neuen Projekt wollte ich das Navigationsmenü mit awesome icons "schmücken". Wenn ich nun den Menü Link bearbeite und unter CSS-Style für Menü-Link "fa fa-home" eingebe, erscheint das gewünschte Icon. Leider ändert sich gleichzeitig die Schriftart. Soweit ich das erkenne von Verdana nach Times New Roman.


    Ich nutze in diesem Fall das Vituemart Template Horme3


    Die awesomefonts sind offensichtlich korrekt aktiviert. Im Quelltext sehe ich <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" type="text/css" />


    Weiß jemand Rat?

  • Zum hilfreichsten Beitrag springen

    Zitat von Indigo66

    Ohne Link, keine Hilfe möglich.


    Hallo Indigo66, danke für den Hinweis,


    um darzustellen was ich meine, hatte ich ein Foto angehängt. Ich nutze eine Subdomain auf einem WEB-Space als Entwicklungsumgebung. Daher kann ich einen Link liefern. Hab das jetzt mal vorübergehend online gestellt. Wie kann denn geholfen werden, wenn jemand sein Projekt lokal entwickelt?


    Wie dem auch sei, hier der Link http://develop.weno-trier.de/


    lg. NO

    In diesem Fall ist ein Link zur Seite zunächst entbehrlich.


    Mit der Klasse auf den Menü-Link kann es nicht gehen, weil dadurch der komplette Link-Text adressiert wird und nicht nur einzelne Zeichen im Text.


    Du müsstest schon ein

    Zitat

    <span class="fa fa-irgendwas"></span>

    in den Text setzen. Nun ist das in Joomla nicht möglich, weil HTML aus Sicherheitsgründen aus vielen Feldern ausgefiltert wird, so auch dem Menü-Text.


    Ein bbcode-Interpreter wäre hier eine Möglichkeit der Wahl. Hier gibts ein Plugin dazu: http://extensions.joomla.org/e…ipts-integration/rokcandy

    Danke für den Link zum Plugin,


    ich fürchte meine Kenntnisse reichen nicht aus um mit Macros arbeiten zu können. Ich hatte gehofft das kleine Problem ließe sich irgenwie per custom css lösen. Und das Problem wäre im Template verborgen.


    Ich denke, ich lasse die Icons einfach weg. Was mich allerdings irritiert, auch hier im Forum sehe ich die awesome icons, z.B. hinter dem Link den du geschickt hast. Kommt das etwa auch per Macro zustande?


    Hab mir den Link genauer angeschaut, das sichtbare Icon externel-link ist im Link selbst anscheinend nicht definiert. Wie kommt es dahin?: <a href="http://extensions.joomla.org/extensions/extension/core-enhancements/coding-a-scripts-integration/rokcandy" class="externalURL" rel="nofollow" target="_blank">extensions.joomla.org/extensio…ipts-integration/rokcandy</a>


    In einem anderen Projekt mit dem Template "Impacto" kann ich die Icons im Menü problemlos darstellen. Einfach in dem ich z.B. "icon-home" als CSS Style für den Menü-Link eingebe (das Template nutzt eine ältere awesome version).


    Bei diesem Template funktioniert das jedoch nur mit Menü Links. Bei Links aus dem Content heraus passiert das Gleiche wie eingangs beschrieben. Das Icon wird dargestellt, verändert aber die Schriftart.


    Daher meine Annahme, dass mein kleines Problem im Template liegt und nicht im Joomla Core

    So, jetzt hab ich mir angeschaut wo das Icon externel-link hier im Forum herkommt


    Es ist offensichtlich doch im CSS definiert, und zwar in style-6.css, mit folgendem Eintrag:


    a.externalURL::after {content: "\f08e";display: inline-block;font-family: FontAwesome !important;font-size: 14px !important;font-weight: normal !important;font-style: normal !important;margin-left: 4px;vertical-align: -1px;}


    Mit der Information komme ich vielleicht selbst dahinter wie man die Icons ordentlich darstellen kann.


    Trotzdem bin ich für jede Hilfe dankbar


    Die Filter kann man doch im JCE -Editor deaktivieren, oder?

    Hm, leider nicht. Nix zu sehen. Funktioniert nur mit den Menü-Links.


    Mein Testlink für Contentlinks sieht so aus: <a href="/test-xyz.de" style="myfa fa-home" class="content-links">test</a>


    Zur Klasse Content Links steht im Template CSS lediglich
    .content-links {
    margin-top: 20px;
    }


    Auch wenn ich keine Link-Klasse angebe erscheinen keine Icons. Mir scheint in dem Fall wird die Custom CSS nicht geladen


    Für heute bin ich mit dem Teilerfolg hochzufrieden