Mention Type Indicators

This plugin adds an icon after every entity mention to indicate the target entity’s type. The plugin’s icons match those in the main sidebar on a default campaign; they may not match if you changed them in your module settings or with a theme like Guardian’s Futuristic Icons.

Icon size

You can change the icon size by adding the following to your campaign CSS and changing the default 12px:

.entity-mention::after {
    --mention-icon-size: 12px;
}

Icon weight

You can also change the icons’ font weight to any of the standard 300, 400 or 900 values (see image comparison below) with the following rule, or set it to inherit to effectively use 400 on most text and 900 on bold text:

.entity-mention::after {
	font-weight: 900;
}

Icon style

If you customized the icons for some of your modules, adding custom CSS rules to match them isn’t too difficult either:

1. Under this plugin description, click View CSS and find the rules that match the necessary modules (some legacy mention types might not match current module names, e.g. Item vs. Object) and copy them to your campaign CSS.
2. Visit the Font Awesome page for your icon, e.g. https://fontawesome.com/icons/fire.
3. Locate the Unicode value near the icon name and click it to copy it to your clipboard.
   
4. In your CSS, replace the "content" property’s Unicode with the one you just copied, making sure to keep the space and backslash in front. You should end up with something like this, in this case giving a Fire icon to the Calendar module:

.entity-mention[data-entity-type="calendar"]::after  { content: " \f06d" }

Compatibility

This can be used side-by-side with my External Link Icons theme without conflict.

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