eigene icons einbinden als buttons

Zitat von schnuppe

Mein Bedürfnis ist, damit und mit meiner Bewerbung fertig zu werden.

Wenn du einigermaßen zügig ein Erfolgserlebnis sehen willst, ist es wahrscheinlich am besten, dort anzuknüpfen, wo du schon vertraut bist. Also: hast du schonmal Icons eingebunden? Und wennja: Wie?

Als nächstes ist es gut zu wissen, wieviele Icons du wo und wie einbinden / einbauen willst.
Ich sage da immer (so ein bisschen schnoddrig): „mach mal ’nen Plan!“ – es ist wirklich gut, sich aufzuschreiben oder eine kleine Skizze zu machen, was man braucht und wo man es braucht.

---

Ich habe gute Erfahrung mit SVG-Grafiken in einem „klassischen“ Iconsprite gemacht.
Mit „klassischem Iconsprite“ meine ich eine Grafikdatei, in der alle benötigten Icons nebeneinander stehen. Die Grafik wird über CSS als Background-Image eingebunden und zwar so, dass immer nur der benötigte Ausschnitt gezeigt wird.
Als erst wenige Browser SVG konnten, hat man das so mit PNG-Grafiken gemacht …

Es gibt auch – dazu in Abgrenzung – SVG-Iconsprites. Hier steht in einer SVG- bzw. XML-Datei der Code für alle benötigten Icons, jeweils mit IDs (wie Ankerpunkte in HTML) aufrufbar.
Bin ich eben drauf gestoßen, als ich die Suchmaschine „iconsprite versus iconfont“ gefragt habe …
Klingt sehr interessant, habe ich aber noch nicht gemacht und deswegen auch noch keine Erfahrung, ob und welche Probleme sich ergeben können. Irgendwas war mit special friend IE … (Wenn ich es richtig mitgeschnitten habe, so auf die Schnelle: IE [welche Version? Problem noch aktuell? Müsste man nochmal genauer recherchieren …] kann es nur, wenn das SVG im Header der Datei steht. Für die Performance wäre eine externe Datei aber besser, weil es dann der Browser cached …)

Zitat von schnuppe

[…] für mein PortfolioTheme […]
Wie mache ich die ganze Sache real?
Ausserdem muss es ja irgendwie bei meinem Server 1und1 reingespielt werden.
Ich kann ein bisschen HTML und CSS jedoch kein PHP und sonst bin ich Hase.

Was ist das für ein Theme? Hast du ein Child-Theme dazu? Oder wenigstens ein custom CSS? – So etwas könnte das Theme von sich aus mitbringen oder es gibt PlugIns dafür.
Du hast hoffentlich FTP-Zugang zu deinem Webspace bei 1und1?

Gruß
helix

Mir fehlt jetzt noch ein bisschen
* deine Entscheidung, welchen Weg du einschlagen willst
* dass du dir die Stichworte schnappst und mal selber die Suchmaschine befragst
=> konkret an Knubbelpunkten weiterhelfen geht im Rahmen der Forenhilfe besser als mal-schnell-kurz ein Tutorial schreiben …

Konkret: mit dem an erster Stelle von dir genannten PlugIn WP SVG Icons sollte das gehen, was du dir vorstellst.
Du hast also die Qual der Wahl: Mit diesem PlugIn deinen eigenen Iconfont für dich verfügbar zu machen. Oder deine Icons „klassisch“ als Hintergrundgrafiken einbinden.
Und dafür dann konkrete Schritte:
* PlugIn-Lösung: PlugIn installieren, ausprobieren => konkrete Knubbelpunkte hier posten
* Hintergrundgrafiken: ein Custom CSS PlugIn installieren oder gleich ein Child-Theme. Dein Theme Make bietet dir ein fertiges Child-Theme an, das du einfach dazuinstallieren kannst. Benötigte Icons fertig machen und als SVG-Dateien abspeichern. Dabei zusammengehörige Icons (z.B. für Farbänderung bei Mouseover) nebeneinander oder untereinander („sprite“). Dich über background-image im CSS einlesen, damit du schonmal eine Spur hast und außerdem weißt, welche der vielen CSS-Seiten für dich gut taugt, wo du nachlesen kannst, wie es weiter geht …

Gruß
helix