MMM-Carousel Pagination Icons

sdetweil

@doriangrey no… we worked out how to do it in css…
for example
one entry like this for each page indicator (nth-child(x) to select the correct thing to override)

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f055";  // <-- icon code goes here
    font-family: FontAwesome;
}

doriangrey

@sdetweil said in MMM-Carousel Pagination Icons:

nth-child

Nice work.

sdetweil

@doriangrey yeh, css tricky stuff. there is ALWAYS a way

BerkSmash1984

@sdetweil @doriangrey

Just to show what the final edits look like in my custom.css and how that looks on my mirror, for the good of the group:

The content entries are the unicodes for the respective icons found on Font Awesome’s website (https://fontawesome.com).

For example, F073 in the first entry (for nth-child(1)) is for a calendar-days Font Awesome icon:

You can see this icon, and all others used on my MagicMirror display to change pages, in the red box of the screenshot below:

Thank you @sdetweil for your help, as always!

I hope this helps others looking to accomplish the same thing!

sdetweil

@BerkSmash1984 and he only has that many entries because he has that many pages defined

BerkSmash1984

@sdetweil Yup!

That is correct, I have 10 unique pages on my MM display. Happy to share more info of my config if anyone needs it.

I did share a lot of info on my display (some small things have changed since then) in my post below:

https://forum.magicmirror.builders/topic/18513/my-magic-mirror-desk-display?_=1721136289198

Philip 0

Hello ,
By making a small modification, I colored each icon with a different color.

Line 588 of MMM-carousel.js, I removed the Style.

label.innerHTML = “<i class='”+Object.values(this.config.icons)[i]+“>”;

I copied it into each icon line of config.js.

icons: {
1: “fa-solid fa-sun’ style=‘color: #ffff00;’”,
2: “fa-solid fa-house-flood-water’ style=‘color: #718fea;’”,
3: “fa-solid fa-triangle-exclamation’ style=‘color: #0099ff;’”,
4: “fa-solid fa-gas-pump’ style=‘color: #ff0000;’”,
5: “fa-solid fa-calendar-days’ style=‘color: #ffcc00;’”,
6: “fa-solid fa-person-walking-luggage’ style=‘color: #00cccc;’”,
7: “fa-brands fa-spotify’ style=‘color: #009933;’”,
8: “fa-solid fa-person-hiking’ style=‘color: #ffffff;’”,
9: “fa-solid fa-video’ style=‘color: #cc00ff;’”,
10: “fa-brands fa-raspberry-pi’ style=‘color: #ff0000;’”,
11: “fa-solid fa-umbrella’ style=‘color: #999999;’”,
12: “fa-solid fa-image-portrait’ style=‘color: #ff6600;’”
},

sdetweil

@Philip-0 you could do the same in css.