FontAwesome Integration

Thema wurde von tobiasSRT, 23. Juni 2015 erstellt.

  1. tobiasSRT
    tobiasSRT Aktives Mitglied
    Registriert seit:
    15. Januar 2015
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    5
    Hallo liebes Forum,


    Ich habe heute - bislag ohne Erfolg - versucht die Iconfont Fontawesome zu installieren. Es funktioniert weder mit lokalen Dateien (ins EyeCandy Template kopiert) noch über den von Fontawesome zur verfügung gestellten link...

    Die fontawesome.min.css wird zwar geladen - aber die Schriften nicht...

    Wäre super wenn mir jemand helfen könnte...
     
  2. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.211
    Danke erhalten:
    6.221
    Danke vergeben:
    1.108
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Vielleicht sagst uns mal was genau du wo gemacht hast
     
  3. tobiasSRT
    tobiasSRT Aktives Mitglied
    Registriert seit:
    15. Januar 2015
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    5
    also:

    in module/head-usermod im <head>:
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    Icons hinzugefügt im Content Manager

    Cache geleert...

    leider ohne Erfolg

    2. Variante
    font-awesome runtergeladen
    in den usermod Ordner kopiert
    in head-USERMOD verlinkt
    Cache geleert
    ohne Erfolg...

    Die font-awesome.min.css wird geladen - seh ich in den Entwicklertools...
     
  4. Anonymous
    Anonymous Administrator
    Mitarbeiter
    Registriert seit:
    26. April 2011
    Beiträge:
    1.853
    Danke erhalten:
    1.461
    Danke vergeben:
    310
    Hi,

    wenn du die CSS Datei font-awesome.min.css in den Ordner /templates/EyeCandy/usermod/css/ kopierst, sind keine Anpassungen an der head.html Datei norwendig, da die CSS Datei dann automatisch geladen wird.

    Aber damit Font Awesome auch funktioniert gibt es im Paket von Font Awesome einen Ordner /fonts/ diesen kopierst du ins Hauptverzeichnis des Shops. Damit sollten die Icons auch geladen werden, wenn du diese ganz normal im Content benutzt.
     
  5. michaelmlakar
    michaelmlakar Erfahrener Benutzer
    Registriert seit:
    28. Oktober 2014
    Beiträge:
    49
    Danke erhalten:
    1
    nicht ganz.. nicht in Hauptverzeichnis des Shops sondern in das templates Verzeichnis
     
  6. tobiasSRT
    tobiasSRT Aktives Mitglied
    Registriert seit:
    15. Januar 2015
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    5
  7. Anonymous
    Anonymous Administrator
    Mitarbeiter
    Registriert seit:
    26. April 2011
    Beiträge:
    1.853
    Danke erhalten:
    1.461
    Danke vergeben:
    310
    Hi tobiasSRT,

    ich habe mir grad mal dein Testshop angesehen und festgestellt, dass du die font-family global für alles mit !important überschreibst und somit die Schrift von Font-Awesome überschrieben wird.

    In einer deiner CSS Dateien ist folgendes definiert:

    HTML:
    html * {
      font-family: 'Open Sans', Helvetica, sans-serif !important;
    }
     
  8. tobiasSRT
    tobiasSRT Aktives Mitglied
    Registriert seit:
    15. Januar 2015
    Beiträge:
    38
    Danke erhalten:
    0
    Danke vergeben:
    5
    Ich danke dir vielmals!! Wär ich nie drauf gekommen!!!
     
  9. Anonymous
    Anonymous Erfahrener Benutzer
    Registriert seit:
    14. Juli 2011
    Beiträge:
    998
    Danke erhalten:
    71
    Danke vergeben:
    131
    Ich wollte auch gerade mal FontAwesome ausprobieren.. Allerdings löscht der Content Manager die folgende Zeile automatisch wieder raus.. ?! Woran liegt das?

    <i class="fa fa-camera-retro"></i> fa-camera-retro
     
  10. Dennis (MotivMonster.de)
    Dennis (MotivMonster.de) G-WARD 2013/14/15/16
    Registriert seit:
    22. September 2011
    Beiträge:
    31.211
    Danke erhalten:
    6.221
    Danke vergeben:
    1.108
    Beruf:
    Mann für alles :)
    Ort:
    Weilburg
    Du musst etwas in die ausgabe packen. Leerzeichen oder so
    HTML:
    <i class="fa fa-camera-retro">&nbsp;</i>