Adding icons to glossary entries

Help / Discuss
1

Hi.

Another noob-question.

We use the glossary-extension. Is it possible to change the look of a glossary-item in the text.

now:

image
image702×191 13.9 KB

idea:
image

The icon would emphasize glossary-items and distinct them from hyperlinks.

I don´t know how to realise that within the less-code of the current theme. Any hints are welcome. Thanks.

Greetings,
Roland

PS. And I don´t mind if you use that in future versions ;).

2

I just managed to add an external icon with the following code:

a.glossary-entry:after {
    padding-right: 5px;
    content: url(https://icon-library.com/images/book-icon-png/book-icon-png-26.jpg); }

But how do I refer to font-awesome-icons within XWIKI?

Thanx.
Roland

3

Hi @Roland,

It seems that glossaryReference template adds class="glossary-entry" for evey link to a glossary definition.
So, you could try adding this CSS code:

.glossary-entry::after {
    content: " 🗎";
}

or this if you want to use the icon font:

a.glossary-entry::after {
    content: " \f0f6";
    font: normal normal normal 14px / 1 FontAwesome;
}

Hope it helps!
Luc

1 Like
4

Thanx LucD. You made my day.

I´d like to add a reference to the font-awesome-icons´ css-values:
Complete list of Font Awesome icons with their CSS content values

1 Like
5

Feel to create a JIRA issue for your idea, at Loading...

Thanks