Sonderzeichen für externen Link

[Lothar Leser]

Hallo Fachleute,

kennt Ihr ein Unicode-Symbol für ungefähr dieses Zeichen

und könnte man das mit CSS oder so automatisch an alle Links in einer Webseite anhängen, die mit Protokoll (http oder https) angegeben sind?

Über eure Hilfe würde ich mich freuen

Grüße
Lothar

[Matthias Scharwies]

Servus!

Hallo Fachleute,

kennt Ihr ein Unicode-Symbol für ungefähr dieses Zeichen

Leider gibt es keine direkte Entsprechung.

Schau mal hier: external_link_arrow.txt

und könnte man das mit CSS oder so automatisch an alle Links in einer Webseite anhängen, die mit Protokoll (http oder https) angegeben sind?

Ja, wir haben das mit SVGs gelöst:

HTML/Tutorials/Links/Gestaltung_mit_CSS #externe_und_interne_Links_kennzeichnen

Herzliche Grüße

Matthias Scharwies

[Bimmelbeule]

Hallo!

Ich habe mir mit Fontello online einen eigenen kleinen Webfont erstellt, der nur einige wenige Symbole enthielt. Unter anderem das Gesuchte (Stichwort: "extern").

https://fontello.com/

Die runter geladene ZIP-Datei enthält unter anderem eine WOFF2-Datei, die ich folgendermaßen lokal eingebunden habe:

@font-face {
font-family: 'font';
src: url('font.woff2') format('woff2');
font-display: swap}

Um dann alle externen Links zu kennzeichnen:

a[href^="http"]::after {
font-family: 'font';
font-size: .7em;
margin-left:.2em;
content: "\f08e"}

Hoffe geholfen zu haben…

Lg, Bimmelbeule

[Lothar Leser]

Guten Morgen,

Ich habe mir mit Fontello online einen eigenen kleinen Webfont erstellt, der nur einige wenige Symbole enthielt. Unter anderem das Gesuchte (Stichwort: "extern").

https://fontello.com/

Die runter geladene ZIP-Datei enthält unter anderem eine WOFF2-Datei, die ich folgendermaßen lokal eingebunden habe:

@font-face {
font-family: 'font';
src: url('font.woff2') format('woff2');
font-display: swap}

Um dann alle externen Links zu kennzeichnen:

a[href^="http"]::after {
font-family: 'font';
font-size: .7em;
margin-left:.2em;
content: "\f08e"}

Danke!
Das sieht doch sehr übersichtlich aus. Mal sehen,ob ich das auch hin bekomme. Das wäre genau das, was ich mir vorgestellt hatte. Ich nehme an, dass dann auch Color, Hover::, usw. funktionieren?

Grüße
Lothar

[Robert B.]

Moin,

Um dann alle externen Links zu kennzeichnen:

a[href^="http"]::after {
font-family: 'font';
font-size: .7em;
margin-left:.2em;
content: "\f08e"}

das ist ja auch das von @Matthias Scharwies verlinkte Beispiel aus dem Wiki, das allerdings nur auf den Anfang mit http prüft und daher auch Links auf lokale Dateien, die mit diesen 4 Zeichen beginnen, matcht.

Viele Grüße
Robert

[Hans Baumann]

Ein Beispiel für die Lösung (wie üblich in selfhtml.org):

https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Einbindung#Inline-SVG

[Matthias Scharwies]

Servus!

Ein Beispiel für die Lösung (wie üblich in selfhtml.org):

https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einstieg/Einbindung#Inline-SVG

Der oben gepostete Link enthält ebenfalls ein Beispiel:

• externe_und_interne_Links_kennzeichnen

Ich werde die beiden Beispiele zusammenfassen, sobald ich Zeit finde.

[EDIT] done! [/EDIT]

Herzliche Grüße

Matthias Scharwies