Multi-value field: add an icon depending on the value

Hello,

At my website I've got a weblink field that allows multiple values, as you can see it on this screenshot:

(Source page: japprecie.raidghost.com/dralms-shook )

This is fine, but I'd like to improve it.
I want to add an appropriate icon in front of each value... depending on the value! I mean: for the SoundCloud link, add a SoundCloud icon, for the YouTube link a YouTube icon, and so on. Do you think it is possible?

I would easily manage to achieve a given same icon, using field properties Viewing > Value list > Every value prefix and Every value suffix.
But is it possible to use a specific syntax inside prefix property to say: if the value contains "soundcloud" then <img src="soundcloud.png"> else..., etc. ?

Good night.
HervE

Hello

you can use it only by using CSS class and
adding a left or right padding and a background inside the padding

1. you can change the type of "weblink" field to "extendend weblink" field
2. find the parameter for enabling "Styling (CSS) Class"
configure the CSS classes and their label (so that you can select them via a drop down in item form)
3. save the field configuration
3. then inside the item form every time that you add a value you can also select a CSS class too for styling

Hello,

Done. I had to add some code like this in the CSS of my template: (etc.)

And here is the (very nice) result - like expected:


Many thanks!

Good night.
HervE

Hello

thanks for the sample CSS, i am sure other people using the extended weblink field, will also find useful in the future

Hello,

That's the reason why I posted

Good night.
HervE

Hello,

Just a detail.
I observed there is this gap between the label and the values, for a multi-values field compared to single-value fields (shown in red below).
Do you know why, and how I could avoid it?

The page is here , if it helps.

Good night.
HervE