@sdetweil
OK, I looked into it, thank you.

Now, I have this images from Fontawesome. It looks nice, but I would like to be able to use other image if needed.

For example, I would replace the “sun” with a picture “04n.png” in the “icons” forder on my raspberry.

I tried to change line 251 with 250 in the custom.css file

Now, the result is, that the sun has disappeared (correct), but just has been replaced with a gap.

do you maybe see a mistake in my custom.css file? the problem is maybe between lines 221 and 240. this is strange…

@sdetweil said in MMM-Carousel Pagination Icons:

url(‘/icons/circle.png’)

Thank you very much Sam.

currently, I have the following command (which works well and shows an icon from FontAwesom) in custom.css:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
content: “\f207”;
font-family: FontAwesome;
color: #FF4433;
}

After putting an image called “olympic.png” in the “MagicMirror/icons” folder, it still does not appear if I write:

.MMM-page-indicator div.module-content div i:nth-child(7)::after {
url(‘/icons/olympics.png’);
}

Do I habe to still use “content:” before or something else?

PS. sorry for asking, I am quite new in this CSS topic

@sdetweil Hello Sam, may I ask you one question about this topic? do you know how it would be possible to show an image stored on the Raspberry or linked from the web, instead of showing an icon from Fontawesome?

@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.

@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!

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 yes, this one can be closed. But I do not see the button to close it

@sdetweil

Problem solved with the help of this tutorial: https://www.gechic.com/en/raspberry-pi-touch-monitor-rotate-touch-screen-rotate-settings/

wihsing you a great week!

@rkorell
hello @rkorell, wenn you tested your Hannspree Touch monitor, did you have to change any parameter on the raspberry, so that the “touching points” work?
On mine, it is working fine in landscape mode, but in the portrait mode, the points are “mirrored”, so that it is impossible to use it without parametring that. Thank you in advance, Cédric

@sdetweil OK, thank you Sam. You’re right indeed, it has nothing to do with the Magic Mirror.

In fact, when I turn the layout right or left with the “Screen Layout editor”, then the “touches” are as “mirrored”. Maybe a configuration problem of the display.

I will ask the display company about this issue.