MMM-Carousel Pagination Icons

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.

sdetweil

@mumblebaj ah, what you meant to say is

.fa.indicator.page-n

where n is a number for each page found, starting at 0

page-0 for first page
page-1 for second page
etc

mumblebaj

@sdetweil Correct. Although, MMM-page-indicator is 0 based, same as MMM-pages, so page-0 would be page 1 etc.