Html/CSS Frage?
Hallo,
ich möchte wie auf Bild gezeigt diese Social Media Icons auf Website einfügen (was für mich kein Problem ist) und diese dann in grün färben (siehe Bild). Wie kann ich das machen? Bitte antwortet sp schnell wie möglich. Danke!
lg
3 Antworten
Um deine Frage sinnvoll beantworten zu können, müssten wir erst einmal wissen, wie die Icons eingebunden werden. Verwendest du gerasterte Grafiken (PNG/JPG), SVG oder nutzt du stattdessen einen eigenen oder bekannten Icon-Schriftsatz (Font)?
Der beste und modernste Ansatz wäre das verwenden von vektorbasierten Piktogrammen. Neben Iconfonts und einzelnen SVGs, besteht auch die Möglichkeit die vektorbasierten Icons in einem SVG als Spritemap zusammenzufassen.
Die Formatierung (Farben, Größe) lässt sich dann einfach und zentral in CSS steuern. Sei es über die Eigenschaft color oder fill. Eine gute Seite für solche Iconfonts als auch zum Erstellen von eigenen (indivuellen) Icon-Sets wäre Iconmoon.
Du kannst die Icons auch einzeln als Rastergrafik (Gif, PNG) einbinden, ich würde dir dennoch zu SVG respektive zu einem eigenen Iconfont raten. Zumal jene Fonts nur einmal geladen werden und so keine weiteren HTTP-Requests verursachen.
Wenn du die Icons an anderer Stelle nochmals verwenden möchtest, müssen diese nicht erneut geladen werden. Ich war jetzt mal so nett und habe dir ein einfaches Snippet erstellt, welches du bei Interesse leicht einbinden kannst.
Benutze SVGs (Scalable Vector Graphic) von den Logos, sind leicht mit CSS einzufärben und laden schneller als Bilder
Du öffnest die Bilder in Photoshop oder Gimp und füllst sie mit dem Grünton aus dem Bild. Dann exportierst du das Bild und bindest es in deine Website ein. Die Bilder innerhalb von CSS grün einzufärben ist ziemlich kompliziert und macht kein Mensch so. Verwende dazu ein Bildbearbeitungsprogramm. Den Hexadezimalcode liest du aus deinem Screenshot mit einer Pipette in Gimp aus.
Die Bilder innerhalb von CSS grün einzufärben ist ziemlich kompliziert und macht kein Mensch so.
Es ist weder „ziemlich kompliziert” noch ist etwas, was kein Mensch so machen würde. Ganz im Gegenteil - genauso wird es mittlerweile gemacht, da derlei Symbole eigentlich ausnahmslos als SVG oder Iconfont eingebunden werden.
Ich mache PNG