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 )



    Am einfachsten via CSS, so z.B.:


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


    das ist natürlich nur ein Beispiel und muss noch auf deine Bedürfnisse angepasst werden.


    Das sieht dann so aus:


    woltlab.com/attachment/97581/

    Nicht im Text, sondern einfach im ACP unter Darstellung - Stile - Stile auflisten - DEIN STIL - Erweiterte Einstellungen in der oberen Box Individuelles CSS und LESS

    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;
}

    gibt es da auch die Möglichkeit den CSS Code opacity zu benutzen wenn man mit der Maus über die "FontAwesome" gleitet ? Oder Farbänderung ?


    Danke

    das sieht gut aus. Die opacity kann die eine Farbe zugeschrieben werden, wollte dieses orange FF9701 haben.


    Danke

    Dann brauchst Du nicht (nur) opacity, sondern (auch) color.





    Gruß norse

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

    Habe mal den ganzen Code hier kopiert.


    "background" ändert den Hintergrund, wenn du die Farbe des Icons während dem hovern ändern willst, brauchst du noch (zusätzlich) "color"

    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.

    Like 2

    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;
}

Participate now!

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

Register Yourself Login