Font Awsome icons in the header

kurtern84

Hi!

Anyone who knows how to use Font Awsome icons in the header?
Tried with image in css, but with no luck using this

.MMM-DHT-Sensor header:before {
  background: url('house-chimney-solid.png');
  display: block;
  width: 16px;
  height: 16px;

  /*
    These rules allow you to position the image anywhere you want in the header
  */
  position: absolute;
  right: 30px;
  top: 0px;
}

nothing shows in the header field.

hango

in config js put

{
	module: "MMM-DHT-Sensor",
	position: "your position",
	header: "<i class=\"fas fa-home\"></i> Header Title",
	classes: "classes if you have",
	config: {
		// your settings
	}
},

in Font Awesome v5 don’t exist house-chimney, for v6 use

{
	module: "MMM-DHT-Sensor",
	position: "your position",
	header: "<i class=\"fa-solid fa-house-chimney\"></i> Header Title",
	classes: "classes if you have",
	config: {
		// your settings
	}
},

and you must have in custom.css this line

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/fontawesome.min.css");

or

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/fontawesome.min.css");

kurtern84

@hango Thanks for the help mate! Works perfekt

kurtern84

@hango Hi again!

Did set some classes, but the changes works when refreshed and disapper after a second.

Do you have a solution for that?

hango

@kurtern84 what classes?
you can use classes if you have css manipulation but is not necessary

kurtern84

@hango

My custom css:

.normal {
  color: #8a8a8a;
}

I use that one for the header, but the text turn back to white after a second

hango

@kurtern84 then write

header {
  color: #8a8a8a;
}

kurtern84

@hango Also tried that with the same result.

hango

@kurtern84
“header” without period before
or try this

header {
  color: #8a8a8a !important;
}

kurtern84

@hango !important; Did the tricks!

Thanks so much with the help.