Font Awesome abrunden

  • Guten Abend,
    stehe momentan vor einem Problem das ich nicht hinbekomme. Auf meiner Startseite habe ich drei Container mit einem "FontAwesome" und darunter einen Text eingegeben. Wie kann ich die "FontAwesome mit einem runden farbigem Hintergrund hinterlegen ? (So wie das auch bei den abgerundeten Avataren im Forum ist )


    Display Spoiler
    Code
    [icon=stackexchange,48][/icon]
    [size=14]Klarheit schaffen[/size]
    
    
    
    
    Quälen Sie sich nicht länger mit wichtigen politischen, kulturellen und gesellschaftlichen Entscheidungen herum. Klarheit zu schaffen, wo Verschwörungstheorien blühen, Wichtiges von Unwichtigem zu trennen und Zusammenhänge zu erklären, ist die Aufgabe von Politik, Medien und Schulen.
  • Das habe ich hinbekommen. Hintergrundfarbe geändert. Doch die "FontAwesome" hat eine graue Farbe wie kann ich die in Weiss umändern ? Und einen Howereffekt mit einer leichten Farbänderung erzeugen.

    Danke

  • Die Farbe der icons kannst du ändern, indem du einfach noch z.B. color:#000; hinzufügst

    Am aktuellen Beispiel müsste das dann im ganzen so aussehen:

    Code
    #tplPage .grid.grid33>span.icon48 {
    background: #0090ff;
    border-radius: 50%;
    padding: 12px;
    color: #000;
    }

    Ein bisschen Schatten nach innen und Abstand nach unten?

    Code
    #tplPage .grid.grid33>span.icon48 {
    background: #0090ff;
    border-radius: 50%;
    padding: 12px;
    color: #000;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.7);
    margin-bottom: 10px;
    }

    Edited once, last by Frank Pabst (December 27, 2014 at 10:11 PM).

  • Habe mal den ganzen Code hier kopiert.

  • Danke,

  • Warum denn nun zweimal dieselbe Farbe? Wenn Du nichts daran ändern willst, ist der Eintrag für color im unteren Code überflüssig.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Guten Abend,
    brauche leider noch einmal euere Hilfe für einen Detail. Bis hierhin funktioniert der Code einwandfrei. Leider besteht der Farbwechsel nur wenn ich über das "Fond Awesome" gleite. Kann man das so einstellen dass das "Fond Awesome" den Farbwechsel vornimmt, wenn man über den ganzen Bereich gleitet. Also über das Bild und den Text, ohne aber dass der geschriebene Text einen Farbwechsel vornimmt.

    Danke

  • ja, das ist möglich, aber ich habe atm nur mobile Geräte zur Verfügung, da kann ich die Selektoren nur schwer finden.
    Entweder findet sich jemand der dir das raussucht ( @norse ?), oder du wartest bis morgen Abend, da hab ich dann wieder einen PC...
    Probier es mal mit:

    Code
    #tplPage .grid.grid33:hover>span.icon48 {
    background: #FF9701;
    color: #ffffff;
    }

    Edited 3 times, last by Frank Pabst (December 27, 2014 at 10:12 PM).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!