Problem nach Update von Font Awesome 3.2.1. auf 4.7.0

**rauel** · 10.11.2016, 19:36

Hallo,

ich habe wegen ein paar neuer Icon ein update von der Font Awesome Version 3.2.1 auf 4.7.0 hochgeladen. Leider sind die Bezeichnungen anders als vorher.
Nun wird bei der classe nicht mehr wie vorher z.Beispiel "icon-angle-down" nun "fa fa-angle-down" oder "icon-reorder" in "fa fa-reorder" verwendet!!

Nun werden im meiner mobilen Version im Menü die Icon nicht mehr angezeigt!
Anhand von Firebug kann ich sehen wo die classen sitzen aber ich finde sie nirgends im css.

http://www.weboutfit.de

Hat jemand eine Idee?

Danke im Voraus.

**rauel** · 11.11.2016, 10:47

Zitat von rauel

Hallo,

ich habe wegen ein paar neuer Icon ein update von der Font Awesome Version 3.2.1 auf 4.7.0 hochgeladen. Leider sind die Bezeichnungen anders als vorher.
Nun wird bei der classe nicht mehr wie vorher z.Beispiel "icon-angle-down" nun "fa fa-angle-down" oder "icon-reorder" in "fa fa-reorder" verwendet!!

Nun werden im meiner mobilen Version im Menü die Icon nicht mehr angezeigt!
Anhand von Firebug kann ich sehen wo die classen sitzen aber ich finde sie nirgends im css.

http://www.weboutfit.de

Hat jemand eine Idee?

Danke im Voraus.

Hat sich erlegigt. Habe selber eine Lösung gefunden.

**mlweb** · 11.11.2016, 12:10

Ganz nett wäre es, wenn Du Deine Lösung hier vorstellst.
Das hilft dann jemandem mit einem gleichen bzw. ähnlichen Problem.

**Katha5** · 12.11.2016, 13:09

Hallo zusammen,

ich habe den auf
Font Awesome CDN für mich generierten Code in mein fe_page.html5 template eingebettet. Nun habe ich den entsprechenden Seiten in der CSS-Klasse den jeweilgen "fa-name" des Icons zugewiesen, aber leider erscheinen bei Chrome nur weiße Kästchen und im Explorer verrutscht nur der Titel in der Menüleiste...
Was mache ich hier falsch?

HTML-Code:

http://www.frauenlob-gymnasium.de/con4/

**Spooky** · 12.11.2016, 15:59

Die Klassen müssen bspw.

Code:

fa fa-info

etc. sein. Du hast das "fa" vergessen. Siehe http://fontawesome.io/examples/

**Katha5** · 12.11.2016, 16:14

cool!

aber warum habe ich die bilder jetzt doppelt in der menüleiste?

**Spooky** · 12.11.2016, 16:17

Die CSS Klasse einer Seite wird in der Navigation beim <li> und beim <a> bzw. <span> ausgegeben.

**Katha5** · 12.11.2016, 16:27

kann ich was dagegen tun?

**Katha5** · 13.11.2016, 16:26

ich bin beim css etwas hilflos. Habe mir jetzt die css-Dateien von Font Awesome hochgeladen und würde gerne das ober Symbol auf meiner Seite ausschalten und das andere etwas größer und mit Abstand zum Text gestalten... wie mach ich das am besten?

danke für eure Hilfe!

**mlweb** · 13.11.2016, 21:52

Zitat von Katha5

ich bin beim css etwas hilflos.

Wenn Du im Layout etwas anpassen möchtest, wirst Du Dich wohl oder übel mit den Grundlagen von css beschäftigen müssen.

Wenn Du für ein konkretes Problem, einen Tip brauchst, dann poste einen Link.

**Katha5** · 14.11.2016, 16:37

Hallo,

mein Problem habe ich oben schon geschrieben:
Ich habe auf meiner Seite

HTML-Code:

www.frauenlob-gymnasium.de/con4

in der Seitenstruktur die Seite "Schulgemeinschaft" mit der css-Klasse "fa fa-user-circle-o" versehen. Nun erscheint dieses Symbol in der Menüleiste doppelt.

Code:

Spooky
Die CSS Klasse einer Seite wird in der Navigation beim <li> und beim <a> bzw. <span> ausgegeben.

Auch erscheint das Bildchen oben links neben dem Gesamtfenster, wenn ich die Kategorie anklicke und das Gesamtfenster rutscht nach links.... Ich würde auch gerne einen Abstand vom Bild zum Wort einfügen...

Ich habe schon auch einiges mit css gebastelt, sonst wäre die Seite nicht so, wie sie ist, aber es kostet mich sehr viel Mühe...

Danke für Tipps :-)

**mlweb** · 14.11.2016, 18:15

Wie @Spooky schon oben schrieb:

Zitat von Spooky

Die CSS Klasse einer Seite wird in der Navigation beim <li> und beim <a> bzw. <span> ausgegeben.

Damit wird das Symbol von FontAwesome einmal bei der Seite selbst ausgegeben, einmal im li Element und einmal beim a bzw. span.
Du musst also dafür sorgen, dass die Ausgabe nur beim <li> oder <span> bzw. <a> ausgegeben wird.
Da ich denke, dass Dein Ziel ist für jeden Navigationspunkt ein anderes Icon zu verwenden, ist die Lösung nicht ganz so trivial.
Ich nutze FontAwesome nicht, deswegen weiß ich nicht genau wie das generierte css aufgebaut ist und ob es dazu auch eine custom.css oder so etwas gibt.
So ad hock würde ich dafür sorgen, dass bei der Seite und bei <a> und <span> trotz der vorhandenen Klasse kein Icon ausgegeben werden.
Das geht zum einen, wenn man die Eigenschaften, die FontAwesome setzt wieder überschreibt.
Eine andere Möglichkeit ist ein "Nachbau" (soweit wie benötigt) des entsprechende css mit eigenen Selektoren, die nur die Listen Elemente der Navigation ansprechen. Die Seiten bekommen dann diese Klassen.
Schau Dir dazu die zu FontAwesome gehörende css-Datei an.
Da könnte dann so aussehen:

Code:

li.my_fa{ ...}
li.my_fa-user-circle-o{...}
...

Ich würde mich wohl für die die zweite Lösung entscheiden.
Sicher gibt es noch bessere/elegantere Lösungen, aber dazu müsste ich mir FontAwesome mal genauer anschauen.
Eine dritte Möglichkeit ist die Anpassung des Navigations-Templates und des Frontend-Templates, so dass die entsprechenden Klassen nur noch z.B. beim <li> gesetzt werden. Oder man ändert nur das Navigations-Template so ab, dass die Klasse für das Icon selbst (z.B. fa-user-circle-o) in Abhängigkeit vom Navigationspunkt unterschiedlich ist, hat aber den Nachteil, dass neue Navigationspunkte immer auch zu einer Änderung des Templates führen.
Außerdem habe ich gerad noch gesehen, dass es eine Erweiterung [font-awesome] für Contao gibt. Schau Dir doch mal an was dort unter Umständen schon vorbereitet ist genau für solch einen Einsatzzweck. Die aktuelle Version der Erweiterung wird allerdings nur noch über Composer https://packagist.org/packages/netzm...o-font-awesome gepflegt.

**Spooky** · 15.11.2016, 09:19

CSS-only Lösung:

Code:

#mainnav > ul > li > a:before,
#mainnav > ul > li > span:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#mainnav > ul > li.schulgemeinschaft > a:before,
#mainnav > ul > li.schulgemeinschaft > span:before {
  content:"\f2be";
}

…

Dies setzt voraus, dass du

deiner Hauptnavigation die CSS ID mainnav gibst
der Seite "Schulgemeinschaft" in der Seitenstruktur die CSS Klasse schulgemeinschaft gibst

**mlweb** · 15.11.2016, 10:01

Stimmt auch eine Möglichkeit - das direkte Zuordnen der Eigenschaften von FontAwesome zu den einzelnen Navigationspunkten.

Wie fast immer führen viele Wege nach Rom.

**rauel** · 24.11.2016, 09:00

Zitat von mlweb

Ganz nett wäre es, wenn Du Deine Lösung hier vorstellst.
Das hilft dann jemandem mit einem gleichen bzw. ähnlichen Problem.

Sorry, hier meine Lösung! Ich habe einfach beide Versionen eingebunden, damit war mein Problem gelöst.

<link rel="stylesheet" href="files/theme_files/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="files/theme_files/font-awesome/css/font-awesome-3.2.1.css">