[Bug] Clock Module - Icon Display Problem #3818
Description
Environment
### SYSTEM: manufacturer: Raspberry Pi Foundation; model: Raspberry Pi 2 Model B Rev 1.1; virtual: false
### OS: platform: linux; distro: Raspbian GNU/Linux; release: 12; arch: arm; kernel: 6.12.20+rpt-rpi-v7
### VERSIONS: electron: 35.1.2; used node: 22.14.0; installed node: 22.14.0; npm: 10.9.2; pm2: 5.4.3
### OTHER: timeZone: ; ELECTRON_ENABLE_GPU: undefined
Which start option are you using?
npm run start
Are you using PM2?
Yes
Module
clock
Have you tried disabling other modules?
- Yes
- No
Have you searched if someone else has already reported the issue on the forum or in the issues?
- Yes
What did you do?
Configuration
{
module: "clock",
position: "top_left", //"top_left",
config: {
timezone: "America/New_York",
displaySeconds: true,
clockBold: false,
showSunTimes: true,
showMoonTimes: 'times',
displaySeconds: false,
lat: "37",
lon: "113",
},
},
Steps to reproduce the issue:
- Load clock module with
showSunTimesand/orshowMoonTimesturned on - Do not load any other modules
What did you expect to happen?
The sun/moon/arrow icons will display.
What actually happened?
The sun/moon/arrow icons will not display unless there are certain other modules loaded. The only change made for the following image was adding the MMM-RandomPhoto module in the fullscreen_below position (at 0% opacity).
Additional comments
The only thing I'm seeing is that there seems to be a ::before in the content of the i tags with the fas classes when the second module is loaded. But that same content is missing when the second module is not loaded:
<div class="clock-grid">
<div class="digital">
<div class="date normal medium">Tuesday, June 24, 2025</div>
<div class="time bright large light">
<span class="clock-hour-digital">11</span>
:
<span class="clock-minute-digital">02</span><span>am</span>
</div>
<div class="sun dimmed small">
<span class=""><i class="fas fa-sun" aria-hidden="true"></i> 5h 56m</span>
<span><i class="fas fa-arrow-up" aria-hidden="true"></i> 4:58 pm</span>
<span><i class="fas fa-arrow-down" aria-hidden="true"></i> 7:22 am</span>
</div>
<div class="moon dimmed small">
<span class=""><i class="fas fa-moon" aria-hidden="true"></i> </span>
<span><i class="fas fa-arrow-up" aria-hidden="true"></i> 4:13 pm</span>
<span><i class="fas fa-arrow-down" aria-hidden="true"></i> 7:45 am</span>
</div>
</div>
</div>
For whatever reason, the ::before does not copy with the rest of the html, but it appears when I inspect.
Participation
- I am willing to submit a pull request for this change.