External Link Icon and Styling en

Installations 38 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, different font and color

Latest version 1.4 View content

Released 3 months ago

Updated the icon to Font Awesome 6.

Plugin CSS for 1.4


/* BEGIN External Link Icon and Styling by Salvatos */
: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, hsl(var(--p)));
	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, hsl(var(--pf)));
}
.entity-content a[href*="//"]:not([href*="kanka.io"]):after {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f35d";
	font-size: 9px;
	vertical-align: top;
	margin-left: 2px;
}
/* END External Link Icon and Styling by Salvatos */