MMM-Carousel Pagination Icons

com1cedric

Dear @sdetweil , hoping your going well, may I ask you something about the comment you put on this page?
-> see this for how to locate the items to set new custom.css entries for https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues/2?_=1719951675453

I do not find where the https://fontawesome.com is referenced to search for the icones.

has it been erased or could you explain me?

Wishing you a relaxing and sunny week-end,

Cédric

sdetweil

@com1cedric search is under the multi bar icon top
left ( often called the hamburger icon, two buns and patties between)

com1cedric

@sdetweil hum… I have to re-explain my question:

fo the moment, in custom.css, the word “hockey” is used for a page using MMM-page-indicator like this:

.MMM-page-indicator div i:nth-child(5)::after {
content: “Hockey”;
}

Let’s say, I want to replace this word “hockey”, with an image of a hockey-puck --> e.g. image “F453” on https://fontawesome.com/search?q=hockey&o=r

Shoud I “just” write instead in custom.css:

.MMM-page-indicator div.module-content div i:nth-child(2)::before {
    content: "\f453";
    font-family: FontAwesome;
}

When I try that, the word “hockey” has disappeared, but not image of a puck is shownd. I should have missed a step…

Can you help me? (could interest other user as well I hope). Thanks in advance!

sdetweil

@com1cedric is the puck in the free section of icons?

sdetweil

@com1cedric i am traveling and dont have my computer out currently, maybe after lunch time.

can you look in the developers window console tab and see if there are any errors

sdetweil

@com1cedric also, is this the 1st or second icon you are trying to change?

com1cedric

@sdetweil hello, and thank you for your time. It helped me a lot, as it is finally working now…

I had to change “before” with “after” after the ::

.MMM-page-indicator div.module-content div i:nth-child(2)::AFTER {
content: “\f453”;
font-family: FontAwesome;
}

So, thank you very much for your help and have a great week-end.

mumblebaj

@com1cedric I have submitted a PR for MMM-page-indicator which should give more flexibility per page. See example below:

.MMM-page-indicator .fa.indicator.page-2::before {
    content:"\f005";
    color: orange !important;
}

.MMM-page-indicator .indicator.active-page {
   animation: pulse 1.2s ease-in-out infinite;
}

If PR is accepted you should be able to target specific page indicators as shown in example above from custom.css.

You could use this fork in the meanwhile:
MMM-page-indicator

sdetweil

@mumblebaj you know there has to be one of the icon entries for every page the user defined, right?

mumblebaj

@sdetweil Not sure if I understand you properly but the other pages would default to the standard circle. The changes I made allows you to target specific pages if you want to change the icon, add animations etc. A little easier to target individuals.