Inline Icons for Mentions

Inline Icons for Mentions

Install
Konstantin Engel
15th Jun, 2022
0 installations 0 likes

Latest version 1.0

Released 2 years ago on 15th Jun, 2022

Puts an Inline Icon before a mention in text fields.


You may also display an Image instead with this code.

Example Character Image 

Replace [[CHARACTER ID]] with an ID. ex: 1234567

Replace [[CHARACTER IMAGE URL]] with an url. ex: https://kanka.com/image.png


.entity-story-block .entity-content a[href*="/characters/[[CHARACTER ID]]"]:before {
    background-image: url([[CHARACTER IMAGE URL]]);
    padding: 14px; content: ""; background-color: transparent; display: inline;
}

CSS rules

.marker-details .entity-content a[href*="/campaign"]:before,
.entity-story-block .entity-content a[href*="/campaign"]:before {
    color: var(--body-text);
    text-transform: uppercase;
    background-size: 28px;
    background-repeat: no-repeat;
    background-position: center left;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    padding-right: 3px;
    font-weight: 900;
}
.entity-story-block .entity-content a[href*="/characters"]:before,
.marker-details .entity-content a[href*="/characters"]:before {content: "\f007";}
.entity-story-block .entity-content a[href*="/locations"]:before,
.marker-details .entity-content a[href*="/locations"]:before {content: '\f66f';}
.entity-story-block .entity-content a[href*="/maps"]:before,
.marker-details .entity-content a[href*="/maps"]:before {content: "\f279";}
.entity-story-block .entity-content a[href*="/organisations"]:before,
.marker-details .entity-content a[href*="/organisations"]:before {content: "\f0c0";}
.entity-story-block .entity-content a[href*="/calandars"]:before,
.marker-details .entity-content a[href*="/calandars"]:before {content: "\f133";}
.entity-story-block .entity-content a[href*="/quests"]:before,
.marker-details .entity-content a[href*="/quests"]:before {content: "\f4d9";}
.entity-story-block .entity-content a[href*="/items"]:before,
.marker-details .entity-content a[href*="/items"]:before {content: "\f3a5";}
.entity-story-block .entity-content a[href*="/events"]:before,
.marker-details .entity-content a[href*="/events"]:before {content: "\f0e7";}
.entity-story-block .entity-content a[href*="/notes"]:before,
.marker-details .entity-content a[href*="/notes"]:before {content: "\f249";}
.entity-story-block .entity-content a[href*="/tags"]:before,
.marker-details .entity-content a[href*="/tags"]:before {content: "\f02b";}
.entity-story-block .entity-content a[href*="/journal"]:before,
.marker-details .entity-content a[href*="/journal"]:before {content: "\f70e";}
 Install

User comments & reviews