CSS: Icon vor Hyperlinks voranstellen

    Hallo zusammen,

    ich habe bereits danach gegoogelt, allerdings keine Lösung für mein Problem finden können.
    Ich würde gerne per CSS allen Hyperlinks im Content-Bereich meines Themes ein Icon voransetzen.

    Manuel funktioniert das bereits indem ich jedem Hyperlink das Icon voransetzte:

    Code
    [COLOR=#2F6F9F][FONT=Menlo]<i[/FONT][/COLOR][COLOR=inherit][FONT=Menlo] [/FONT][/COLOR][COLOR=#4F9FCF][FONT=Menlo]class=[/FONT][/COLOR][COLOR=#D44950][FONT=Menlo]"icon[/FONT][/COLOR][COLOR=#D44950][FONT=Menlo]-external-link"[/FONT][/COLOR][COLOR=#2F6F9F][FONT=Menlo]></i>[/FONT][/COLOR]

    Gerne würde ich genau das aber automatisieren.
    Der betroffene Beispiel-Bereich ist von "Was tun..." bis zum Seitenende, also bis zum Button "Richtlinien...": http://goo.gl/h7c1vH

    Viele Grüße und einen schönen Dienstag!

    • 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

    Frag mal die Suchmaschine deines Vertrauens nach „CSS Pseudoklasse :before“ – damit sollte das machbar sein.

    Gruß
    helix

    Hallo Helix,

    ich habe die Suchmaschine mal gefragt und die Pseudoklasse eingesetzt. Leider aber ohne Erfolg. Bin mir ehrlich gesagt auch nicht sicher, ob ich das Icon richtig aufrufe. Habe einfach mal einen CSS-Abschnitt des Suche-Icons kopiert in der Hoffnung so in Richtung Lösung zu gelangen.

    Ähm. Wenn du deine Hyperlinks mit einem Icon vor dem Hyperlink versehen willst, solltest du auch das HTML-Element für Hyperlinks mit der Pseudoklasse :before ausstatten. Also

    Code
    a:before {}

    beziehungsweise, damit es sich auf deinen Content-Bereich beschränkt, sowas wie

    Code
    .entry-content a:before {}

    Und innerhalb der geschweiften Klammern kommt dann das, was du vor dem Link haben willst. Absolute Positionierung finde ich an dieser Stelle ziemlich absurd. Ich würde mal so anfangen:

    Code
    .entry-content a:before {
content: '\f400';
font-family: 'Genericons';
font-size: 24px;
}


    Und dann bürsten, bis es passt. (Farbe, evtl. noch ein Leerzeichen etc.)

    Gruß
    helix

    Hallo Helix!

    Vielen lieben Dank für deine hervorragende Hilfe!
    Scheinbar stimmt aber mit meiner CSS-Klasse etwas nicht. Das Icon wird jetzt auf sämtliche Links angewandt, auch auf Buttons etc. auf der betroffenen Beispielseite, bzw. Links zu Artikeln auf der Startseite. Gibt es da auch eine Lösung für oder muss ich tatsächlich jeden gewünschten Link manuell bearbeiten?

    Viele liebe Grüße!

    Zitat von bluebird145

    Das Icon wird jetzt auf sämtliche Links angewandt, auch auf Buttons etc. auf der betroffenen Beispielseite, bzw. Links zu Artikeln auf der Startseite. Gibt es da auch eine Lösung für oder muss ich tatsächlich jeden gewünschten Link manuell bearbeiten?


    Du musst dann unterscheiden, zwischen internen Links und externen Links. Beispiel:

    Code
    /* Kennzeichnung externer Links */


.entry-content a[href^='http']:not([href^='http://domain.de']):not([href^='https://domain.de']):after {
content: "\00A0\2197";
color: red; font-weight:bolder;
padding-right: .15em;}


    Näheres auf texto 8-)

    Du musst genauer eingrenzen, in welchem Bereich deine <a>-Elemente von der Formatierung betroffen sein sollen.

    Ich hatte, ehrlich gesagt, nicht überprüft, ob es auf deiner Seite hinhaut mit der Klasse .entry-content. Sollte aber eigentlich …

    Also nochmal langsam, zum Nachvollziehen: Du hattest gefragt nach „allen Hyperlinks im Content-Bereich“.
    Die CSS-Anweisung für .entry-content a:before stellt allen <a>-Elementen im <div> mit der Klasse .entry-content dein Genericon voran.

    Damit hättest du schonmal nicht mehr die Links im Navigationsmenü.
    Buttons ist natürlich auch eine Sache. Die haben aber ziemlich sicher eine eigene Klasse (womit man sie dann wieder ausschließen könnte).

    Du musst einfach strukturell gucken, wie du gezielt die Links ansprechen kannst, die du ansprechen willst.
    Wenn nicht allzuviele Links dadurch nachzubessern sind, ist der einfachste Weg der, den Links beim Erstellen eine eigene CSS-Klasse mitzugeben

    HTML
    <a class="genericon" href="">Linktext</a>


    und dann die CSS-Anweisung für

    Code
    a.genericon {}

    Gruß
    helix

    Hallo ihr beiden,

    da ich ja interne und externe Links kennzeichnen möchte, allerdings nur wenn sie sich im Text befinden, werde ich wohl um die manuelle Lösung nicht herumkommen. Zumindest weiß ich als CSS-Nichtsnutz nicht, wie ich das ganze noch weiter eingrenzen soll.

    Ich verwende jetzt folgenden Code:

    Code
    a.icon-link:before {content: '\f442';
font-family: 'Genericons';
font-size: 15px;
color: #dd3333;
}

    Ist es möglich, dass Icon horizontal in der Zeile / Text auszurichten?
    Aktuell steht es eher hoch, siehe Beispielseite.

    Viele Grüße!

    vertical-align: middle;

    WordPress ist "frei" wie in Freiheit es zu nutzen, aber nicht im Sinne von Freibier. Wer also glaubt man bekommt rund um WordPress alles kostenlos, der irrt. Hilfe ist ein Geschenk für das man sich bedankt, dafür gibt es den 'Gefällt mir' Button. Wer das nicht kann und sich selbst nicht zu helfen weiss, muss sich bezahlte Unterstützung suchen.

    Zitat von bluebird145

    da ich ja interne und externe Links kennzeichnen möchte, allerdings nur wenn sie sich im Text befinden, werde ich wohl um die manuelle Lösung nicht herumkommen. Zumindest weiß ich als CSS-Nichtsnutz nicht, wie ich das ganze noch weiter eingrenzen soll.


    Naja, so wie von SuMu gepostet. In dem verlinkten Beitrag steht auch, wie es funktioniert. Hätte sich also gelohnt, dem Link einmal zu folgen. Du kannst auch einfach glauben, dass es funktioniert, und dann im geposteten Beispiel lediglich :after durch :before ersetzen und eben den Code für dein Genericon etc.

    Ob du „CSS-Nichtsnutz“ bleiben willst, ist ja deine Entscheidung …

    Zitat von bluebird145

    Ist es möglich, dass Icon horizontal in der Zeile / Text auszurichten?
    Aktuell steht es eher hoch, siehe Beispielseite.


    Dafür sollte die CSS-Eigenschaft vertical-align zuständig sein. (Sehe grade, mensmaximus war schneller)

    Gruß
    helix

    Den Beitrag und Link von SuMu habe ich mir angeschaut. Möchte ich doch aber interne und externe Links nutzen, kann ich ja weder das Eine noch das Andere über die not-Funktion auslassen. Die not-Funktion wird ja auch nicht erkennen, welche Links manuell von mir gesetzt sind und welche durch Wordpress, z.B. in der Archiv-Ansicht gesetzt wurden oder?

    Bleiben möchte ich es nicht, sonst würde ich mich damit ja nicht beschäftigen :-)

    Sehr gut, dann lösen wir auch dein Missverständnis für dich auf!

    Der Code, den SuMu gepostet hat, gehört in die CSS-Datei. Er ändert nichts an der Ausgabe der Daten, sondern nur an ihrer Darstellung. Und das tut er nach dem Muster: wenn dein <a>-Element nicht auf deine eigene Domain verweist, dann behandle das Element als externen Link und stelle es mit dem vorangestellten Genericon dar.

    Ansonsten Tipp zum Lernen: frag regelmäßig, wann immer du dazu den Kopf frei genug hast, die Suchmaschine deines Vertrauens nach den CSS-Eigenschaften, die hier so als Lösung gepostet werden. Es gibt mittlerweile wirklich richtig geniale CSS-Portale, auf denen gut erklärt wird, wie diese magische Veranstaltung CSS funktioniert.
    Es ist normal, dass man am Anfang fast nur Bahnhof versteht. Aber das wird immer besser. Und das erstaunlich schnell.

    Gruß
    helix

    Zitat von helix

    Der Code, den SuMu gepostet hat, gehört in die CSS-Datei. Er ändert nichts an der Ausgabe der Daten, sondern nur an ihrer Darstellung. Und das tut er nach dem Muster: wenn dein <a>-Element nicht auf deine eigene Domain verweist, dann behandle das Element als externen Link und stelle es mit dem vorangestellten Genericon dar.

    Dann habe ich es doch aber richtig verstanden ;-)
    Dieses Muster funktioniert ja nicht bei mir, da ich auch auch Links in Textbereichen die auf interne Links verweisen entsprechend darstellen möchte.

    Dann ist die Antwort eine Abwägung: Wieviele Links müsstest du jetzt mit einer Klasse .genericon (oder wie-auch-immer du die benennen willst) ausstatten? => D.h. würde sich der Aufwand lohnen, deine Seitenstruktur zu durchforsten, ob du es doch strukturell anpassen kannst?

    Also: Links im Textbereich sind schonmal – wie schon benannt

    Code
    .entry-content a {}


    Was kommen innerhalb des div.entry-content noch für Links vor?
    Du hast von Buttons geschrieben. Die haben vielleicht eine eigene Klasse, damit könntest du sie (auch wieder über Pseudoklasse :not()) ausschließen.
    Was noch? Mach eine Liste. Guck, ob die eigene Klassen haben. Sonst guck unter CSS => Selektoren, ob du das Vorkommen strukturell eingrenzen bzw. ausschließen kannst.

    Im Prinzip ist es ja sehr sinnvoll, es global über CSS zu lösen.
    Du wirst hinterher Links mit Klassen eingeben können. Sobald jemand anderes, weniger bewandertes, einen Text mit Link einstellen will, wird’s happig. Ist so …

    Gruß
    helix

    Zitat von helix

    Im Prinzip ist es ja sehr sinnvoll, es global über CSS zu lösen.
    Du wirst hinterher Links mit Klassen eingeben können. Sobald jemand anderes, weniger bewandertes, einen Text mit Link einstellen will, wird’s happig. Ist so …

    Ja, damit hast du natürlich Recht. Werde auch versuchen das wie beschrieben zu lösen. Gab es nicht einmal ein Tool für Chrome oder Firefox, um sich in "Echtzeit" die betreffende CSS-Klasse eines bestimmten Webseitenabschnitts anzeigen zu lassen? Das würde mir vielleicht bei der Suche ein wenig weiterhelfen.

    Ja, die nennen sich Webentwickler-Tools. Gibt es in Chrome oder Firefox. Safari kennt auch was in der Art. Oder für Firefox gibt es nach wie vor Firebug. Guck sie dir an und such dir aus, was dir am besten liegt.

    Gruß
    helix

    Hallo zusammen,

    ich habe mich mal weiter mit den CSS-Klassen beschäftigt und mir ein entsprechendes Entwickler-Tool in Chrome installiert.
    Grundsätzlich befinden sich alle meine Links also in der CSS-Klasse ".entry-content" - außer dieser Klasse muss ich nun aber alles was ich nicht brauche mit der not-Funktion ausschließen. Als ersten Versuch hatte ich da die Klasse ".nx-posts" genommen, da diese auf der Startseite scheinbar meine Blogansicht umfasst.

    Das Script sieht so aus, funktioniert aber natürlich nicht. Habe es mehrfach verglichen mit Beispielen:

    Für mein Verständnis rufe ich in beiden Fällen die Klasse ".entry-content" auf, schließe in diesem Bereich allerdings die Klasse ".nx-posts" aus.
    Was mache ich da falsch?

    Viele Grüße

    Du musst im CSS die HTML-Elemente in der gleichen Reihenfolge bringen, wie sie im Quelltext ineinander verschachtelt sind.

    Du hast ein div mit der Klasse .entry-content. In diesem div gibt es (unter anderem) wieder ein div, diesmal mit deiner Klasse .nx-posts. Du willst, dass Links (a) innerhalb dieses divs nicht mit deinem Genericon dargestellt werden.

    Da kannst du nun zweierlei probieren:

    Code
    .entry-content :not(.nx-posts) a:before {}


    oder

    Code
    .nx-posts a:before {
content: '';
}


    Gegebenenfalls im zweiten Beispiel vor der Klasse .nx-posts auch noch die Klasse .entry-content notieren (mit Leerzeichen dazwischen).

    Und dann bitte nochmal nachlesen, wie sich das in CSS mit der Auszeichnung verschachtelter Elemente verhält. Bringt dich ja nicht weiter, wenn du irgendwie über Try & Error in deinem Stylesheet rumstocherst. (Dein Fehler zeigt, wo es in deinem Verständnis noch hakt; also nimm das nicht als bösartig, sondern als gezielten Hinweis. Danke.)

    Gruß
    helix

    Guten Morgen zusammen!

    Ich habe jetzt beide deiner Beispiele mehrfach in verschiedenen Versionen hin und her getestet und auch deinen Hinweis gelesen. Es will aber nicht richtig funktionieren.
    Dieser Code ist leider in Anbetracht des Auskommentieren der :not-Klassen wirkungslos:


    Bei diesem Code hatte ich immerhin den Teilerfolg, dass das Icon in .nx-posts verschwunden ist. Der Link wird dennoch in #dd3333 formatiert.


    Ich verstehe absolut nicht woran es liegt. Die Klassen scheinen ja die Richtigen zu sein. Ansonsten hätte ich im zweiten Code keinen Teilerfolg. Das Entwicklertool gibt mir auch keine anderen Klassen mehr aus die ich verwenden könnte. Ich bin momentan vollkommen ratlos.

    Viele liebe Grüße!

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden