.calendar div.module-content::after {
  content: url("/css/k13.svg");
}

or

.calendar div.module-content {
  content: url("/css/k13.svg");
}

which works (svg is visible).

So maybe something with your css concerning the child-stuff is wrong (my css knowledge is to bad to help here)

/home/… in not one of out supported folders

it has to be MagicMirror web server based , from the MagicMirror folder as root (/)

url('/css/house.svg')

thank you for your inputs.

I tried it and put the image (downloaded from flaticon.com) on the CSS file

When I search for it in the Chromium browser (to be sure the URL is correct), it works

but when I put this path in the custom.css files, with full or shorten path, it does not appear…

in the console, I do not find anything suspicious (I only use mm-page and mm-page-indicator, and no carrousel).

the /icons subfolder will not work, you have to use one of these

this info might be of help on the image selection
https://elfsight.com/blog/svg-png-jpeg-choose-the-image-format-for-your-website/

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…

https://forum.magicmirror.builders/post/125833

icons are very small images

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

url('/folder_in_mm_tree/xxx.jpg/png/gif as appropriate')

note the MM web server root is ~/MagicMirror

so the files have to be in THAT folder tree
you can LINK files/folders outside into the MM tree with the -->ln<-- command

so, assume you made a

MagicMirror/icons

folder and in it is

circle.png

then you could use

url('/icons/circle.png')

or

url('http://localhost:mm_port/icons/circle.png')  /* not this ONLY works IF the browser is on the SAME MACHINE as MM..*/

if not you need the relative(url(‘/…’), OR have to hard code the MM machine address
like this

url('http://MM_IP_address:mm_port/icons/circle.png')

if linked from the web use its complete url path

start() {
  this.curPage = 0;
  this.mmmPagesDetected = false;
},

.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