External Link Icon and Styling en

Salvatos

Installations 35 Likes 6

Automatically adds a recognizable icon after external links in entity content areas (entry, posts, dashboard widgets, etc.) and provides custom properties to style them further.

This plugin is compatible with all official themes and should integrate seamlessly with Marketplace themes. It pairs well with Mention Type Indicators.

Settings

You can add and customize the following CSS custom properties to your campaign to give external links a more distinct appearance:

:body {
	--external-link-color: var(--link-text);
	--external-link-hover-color: var(--link-hover);
	--external-link-font: inherit;
	--external-link-size: inherit;
	--external-link-weight: inherit;
	--external-link-decoration: inherit;
}

The default values above correspond to the official Default theme.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

External link icons

External link icons, different font and color

Latest version 1.2 View content

Released 2 months ago

Updated Font Awesome Free references to Font Awesome Pro to match Kanka 1.38.

Plugin CSS for 1.2


:root {
	--external-link-color: var(--link-text);
	--external-link-hover-color: var(--link-hover);
	--external-link-font: inherit;
	--external-link-size: inherit;
	--external-link-weight: inherit;
	--external-link-decoration: inherit;
}
.entity-content a[href*="//"]:not([href*="kanka.io"]) {
	color: var(--external-link-color);
	font-family: var(--external-link-font);
	font-size: var(--external-link-size);
	font-weight: var(--external-link-weight);
	text-decoration: var(--external-link-decoration);
}
.entity-content a[href*="//"]:not([href*="kanka.io"]):hover {
	color: var(--external-link-hover-color);
}
.entity-content a[href*="//"]:not([href*="kanka.io"]):after {
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	content: "\f35d";
	font-size: 9px;
	vertical-align: top;
	margin-left: 2px;
}