Webfonts als Symbol neben Plugin

Oli89

Hallo zusammen,

könntet Ihr mir bitte nochmals bei der Einbindung eines Webfonts helfen?

Dieses Mal soll das Webfonts-Symbol links neben einem Plugin erscheinen, welches automatisch ein Inhaltsverzeichnis erstellt.

aktuell sieht das ganze so aus:

Mein Ziel wäre es ein Icomoon-Webfonts wie im folgenden Bild dargestellt einzubinden:

Hierbei ist es allerdings wichtig, dass sich die Größe des Symbols immer an die Größe des Inhaltsverzeichnisses anpasst,

welches sich in der Höhe bedingt durch die unterschiedliche Überschriftenanzahl von Seite zu Seite ändert.

Meine ersten Versuche das Element mit dem before Kommando zu platzieren liefen leider ins Leere:-(

Habt Ihr eine gute Idee wie ich das hinbekommen könnte?

Über Antworten würde ich mich sehr freuen.

Viele Grüße

basti1012

Die Größe der Icons werden ja über font-size geregelt.

Da fällt mir keine Lösung mit CSS ein nur mit Javascript.

Wenn ich dich richtig verstanden habe willst, du ja das Icon immer so hoch ist wie die Zeilen daneben.

Also ob 2 Zeilen oder 4 , das Icon soll dann genauso groß sein ?.

Habe zwar schon mit einigen Sachen versucht , doch ohne Js kriege ich es nicht hin.

Mit Js aber so ungefähr

https://basti1012.bplaced.net/index.php?ordn…ol_neben_Plugin

synaptic

padding in höhe und breite des symbolcontainers vergeben (padding-bottom, padding right), symbolcontainer absolut positionieren right:0; bottom:0;

und dann wars das schon

Oli89

Guten Morgen und vielen Dank für eure Antworten.

Ich habe in den letzten Tagen versucht diese umzusetzen, jedoch leider ohne Erfolg:-(

@basti1012: Da ich bisher leider noch nie etwas mit JS gemacht habe, hab ich mich hier versucht einzulesen. Ebenso habe ich versucht deinen Code dahin anzupassen, dass er sich das Icon meinem Plugin anlegt. Hier hatte ich leider keinen Erfolg.

Wie im folgenden Bild zu sehen heißt das Plugin class="lwptoc_i".

Könntest du mir bezüglich des Codes bitte nochmals weiterhelfen?

Was ebenso noch interessant wäre, ist wie ich den Code genau einbinden muss.

Ich vermute der CSS Teil kommt in meinen Child-Theme in die Style-Datei.

Was den HTML angeht, so habe ich gelesen dass ich diesen mit in den Header packen kann, stimmt das so?

Und als letztes bezüglich des JS Teils, ich vermute das ich diesen in einer JS Datei abspeichern sollte.

Kannst du mir hier noch sagen welchen Namen die Datei tragen soll und wo ich sie genau ablegen muss?

@synaptic:

Auch dir vielen Dank für deine Antwort. Gerne können wir auch deinen Weg versuchen. Nur bin ich mir auch hier nicht sicher, wie ich das Webfonts links von den Plugin platzieren kann. Könntest du mir hier ggf. auch weiterhelfen?

Sorry für die vielen Nachfragen, ich bin leider aktuell erst dabei mich mit CSS, HTML etc. auseinander zu setzen, da alles bisher rein direkt im Wordpress abgedeckt habe.

Viele Grüße

basti1012

könntest du mal eine testseite erstellen oder ein beispiel bei Codepen erstellen ?

Ich kenne dein html nicht und auch nicht den rest wo du es einbauen möchtest.

Ansonsten muss das html in der html Datei ,an besten da wo es erscheinen soll.

Cssd im <head> in <style> packen ,der in einer externen Datei mit einbinden, oder in einer Vorhandener Css Datei mit rein kopieren .

Beim Js das gleiche.

Einbinden , oder unter den Footer in <script>CODE</script> einbinden.

Besser wäre es wenn du mal einen Link zu Seite posten kannst oder Test erstellen tust.

Eigentlich sollte mein Beispiel so schon laufen.

Das Beispiel von synaptic habe ich noch nicht getestet.

Kann mir gerade auch nicht vorstellen wie das gehen soll.

Ich werde es aber auch mal testen und wenn es geht dann brauchst du die geänderten Css Daten auch nur in der Css mit reinkopieren

synaptic

ich gestehe ich hab von handy aus geantwortet und das lupensymbol vom anhang-preview als webfont-dings interpretiert

war noch früh und die nacht war lang. die version vom basti1012 is da schon die richtige wahl, wenn du die fontsize dynamisch benötigst.

line-height:100% wird nicht gehen, so dass es komplett mit CSS lösbar wäre.

Basti, brauchste nicht testen, ich hab gefailed^^

Oli89

basti1012 ich habe mich bei dir per Mail gemeldet und dir dort Zugang zu einer Testseite gegeben.

Ich hoffe die Mail etc. ist angekommen und du kommst so zurecht.

Freue mich schon von dir zu hören.

synaptic schade dass dein Weg nicht funktioniert, trotzdem vielen Dank für deinen Versuch zu helfen.

Viele Grüße