externe Links definieren mit Bildchen

[stefanz]

Hallo zusammen

Ich möchte Links, die auf externen Inhalt gehen, mit einem Symbol vor dem Text ausstatten.

In css würde ich sowas machen wie

a.extern:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggc3R5bGU9J2ZpbGw6bm9uZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzQ0NDQ0NDtzdHJva2Utd2lkdGg6MTsnIGQ9J20gOS41LDQuNSAtNSwwIDAsOCA4LDAgMCwtNScgLz48cGF0aCBzdHlsZT0nZmlsbDpub25lO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNDQ0NDQ0O3N0cm9rZS13aWR0aDoxOycgZD0nbSAxMC41LDIuNSA0LDAgMCw0JyAvPjxwYXRoIHN0eWxlPSdmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0NDQ0NDQ7c3Ryb2tlLXdpZHRoOjE7JyBkPSdtIDEwLjUsNi41IDQsLTQnIC8+PC9zdmc+IA==");
}

Und das sieht dann so aus wie im Screenshot im Anhang bei "Offene Stellen".

Wie kann ich das am Besten machen?

Ich freue mich auf einen Tipp

Bearbeitet 19. April von stefanz

[Ivo Birrer]

Hi stefanz

Ein Ansatz wäre folgender:

a.extern::before {
content: "\2197";
color: #fff;
margin-right: 5px;
display: inline-block;
}

Beim Link müsstest du dann noch die Klasse "extern" mitgeben. Also:

<a class="extern" href="http://www.offenestellen.ch">Offene Stellen</a>

Mit einem Image (wie von dir angedacht) geht es auch, ich habs aber mit dem SVG aber irgendwie nicht hinbekommen. Ich würde das SVG als PNG auf dem Server ablegen und dann verlinken.

Vermutlich müsste es dann in etwa so aussehen;

a.extern::before {
    background-image: url('/images/extern.png');
    background-size: 10px 10px;
    display: inline-block;
    width: 10px; 
    height: 10px;
    content:"";
}

 

Gruss

Ivo

Bearbeitet 22. April von Ivo Birrer

[stefanz]

Danke @Ivo Birrer für die Antwort!

Da ich nicht weiss, wie man in clubdesk CSS Klasse  an einen Link hinzufügt, hier noch eine Variante, die ein Bild vor jeden Link hinzufügt, der in einem neuen Tab aufgemacht wird.

/** Icon vor Text im Link anzeigen **/
a[target="_blank"]:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggc3R5bGU9J2ZpbGw6bm9uZTtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzQ0NDQ0NDtzdHJva2Utd2lkdGg6MTsnIGQ9J20gOS41LDQuNSAtNSwwIDAsOCA4LDAgMCwtNScgLz48cGF0aCBzdHlsZT0nZmlsbDpub25lO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojNDQ0NDQ0O3N0cm9rZS13aWR0aDoxOycgZD0nbSAxMC41LDIuNSA0LDAgMCw0JyAvPjxwYXRoIHN0eWxlPSdmaWxsOm5vbmU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiM0NDQ0NDQ7c3Ryb2tlLXdpZHRoOjE7JyBkPSdtIDEwLjUsNi41IDQsLTQnIC8+PC9zdmc+IA==");
    height: 16px;
    width: 16px;
    vertical-align: top;
    content: '';
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    margin: 3px 5px 0 0;
}

 

Bearbeitet 22. April von stefanz

[Alex]

Ein Beispielbild mit und ohne CSS Code wäre interessant.

[Ivo Birrer]

@stefanz

vor 13 Stunden schrieb stefanz:

Danke @Ivo Birrer für die Antwort!

Da ich nicht weiss, wie man in clubdesk CSS Klasse  an einen Link hinzufügt, ...

Du kannst in Clubdesk zum Beispiel bei Text-Blöcken auf "Bearbeiten" und dann auf "<>Quelltext" klicken und die Klasse händisch in den Link schreiben.