eigene icons einbinden als buttons

    Bitte,
    da ich schon etwas länger unterwegs bin, vielleicht ist jemand so freundlich und nimmt sich die Zeit, mir kurz die Vorgehensweise für mich zu gliedern.
    Ich wünsche für mein PortfolioTheme eigene icons, welche als buttons funktionieren können. diese Icons sind ebenfalls auf meiner PrintVersion.

    Soviel ich weiß, kommen icons aus einem font, welche wie zum Beispiel über fontella als svg-bildchen gebaut werden.
    So habe ich dies verstanden. Wenn das alles so stimmt oder es einfachere Varianten gibt, schön.
    Mein Bedürfnis ist, damit und mit meiner Bewerbung fertig zu werden.

    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.

    Danke schön

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    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

    GutenAbend Helix
    vielen Dank für deine Antwort. Bin heilfroh darüber.

    Bisher hatte ich nur icons im theme, wenn sie das Theme eben geboten hatte. ich möchte ja eigene.
    Prinzipiell steht das Gerüst der Site und welche Icons ich brauche auch.
    Zum Test hatte ich eines schon über fontella gespeichert. Nun weiß ich eben nicht weiter. Dann noch eins über ico moon.
    Ja ich habe Filezille und kann up- und downloaden.

    Ich wollte sie wie übliche Icons nutzen können, dass sie bei mouseover zum Beispiel die Farbe ändern oder sonst wie rumwackeln.
    Mich hatte mal das Theme quest inspiriert, dann wegen dauernder Fehler damit habe nun Make. Habe keines gekauft sondern nutze die freien Versionen. Klar gibt es dort icons doch nicht die Möglichekeit eigene einzubauen. Oder ich verstehe es einfach nicht.

    Kannst du bitte mehr dazu sagen?
    Bisher habe ich auch noch kein Childtheme bzw child CSS, sondern nur das Theme und plugins benutzt.


    Habe diverse Plugins (wp-svg icons - icon fonts ...) angeschaut, dort kann ich nicht erkennen, wie oder ob ein eigenes einbinden zu können. bei letzterem steht auch ico moon free.
    doch wie mache ich das nun mit dem Dateien? svg ... html .... CSS.....

    Magst du mir das erklären?


    fröhliGrüße
    Suse Schnuppe

    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

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden