The Noob's (in)complete guide to CSS for Hubitat

📱 Mobile Apps
63

Thank you @morningz!

As long as you don't mind non-local fonts, this would then also work:

Eg. for a Fighter Jet (why not?) instead of a running guy when there is motion:

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css";

.he-running:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    content: "\f0fb";
}

Or, for using the Rebellion Alliance icon:

.he-running:before {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400;
    content: "\f1d0";
}

The font-weight and correct font family are important.

With all of these icons we can style away however much we want :stuck_out_tongue:

Similar techniques could be used to put an image in the content (both remote and base64 encoded are possible), but this I'll leave to someone else to write detailed instructions about, at least for now :stuck_out_tongue:

You can use this site to encode in base64, and then something like this:

.he-running:before {
    content: url('data:image/png;base64,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');
}

And if you want to control the size and use SVG (SVG doesn't really need base64 and will be smaller without it, but why complicate things):

.he-running:before {
    background-size: 32px 32px;
    width: 28px; 
    height: 32px;
display: block;
content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGc+PHBhdGggZD0ibTM0MS42MTcgMzc0Ljk1aC0xNzEuMjM0cy03MS42NjYgMzkuOTY4LTcxLjY2NiAxMjkuNTVoOTAuMDk3bDY3LjE4Ni0xNy45NjEgNjcuMTg3IDE3Ljk2MWg5MC4wOTdjLS4wMDEtODkuNTgzLTcxLjY2Ny0xMjkuNTUtNzEuNjY3LTEyOS41NXoiIGZpbGw9IiM3NzcxOGMiLz48cGF0aCBkPSJtMTk0LjM4MyAzNzQuOTVoLTI0cy03MS42NjYgMzkuOTY4LTcxLjY2NiAxMjkuNTVoMjRjMC04OS41ODMgNzEuNjY2LTEyOS41NSA3MS42NjYtMTI5LjU1eiIgZmlsbD0iIzVjNTg2ZiIvPjxwYXRoIGQ9Im0yNTYgNDM3LjMxM2MtMzcuMTA2IDAtNjcuMTg3IDMwLjA4LTY3LjE4NyA2Ny4xODdoMTM0LjM3M2MuMDAxLTM3LjEwNi0zMC4wOC02Ny4xODctNjcuMTg2LTY3LjE4N3oiIGZpbGw9IiNjN2M1Y2IiLz48cGF0aCBkPSJtMjU2IDQ2OC41NzdjLTE5Ljg0IDAtMzUuOTIzIDE2LjA4My0zNS45MjMgMzUuOTIzaDcxLjg0NmMwLTE5Ljg0LTE2LjA4My0zNS45MjMtMzUuOTIzLTM1LjkyM3oiIGZpbGw9IiNiMmIwYmMiLz48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyMzAuNzgyIiBmaWxsPSIjZmZkY2NlIiByPSIxNjIuMTU2Ii8+PHBhdGggZD0ibTM4MS4wNDggNTkuMjk0Yy0zMi4wMDktMzEuOTk5LTc2LjIxMi01MS43OTQtMTI1LjA0OC01MS43OTQtOTcuNjYzIDAtMTc2Ljg0MSA3OS4xNjktMTc2Ljg0MSAxNzYuODQxdjEyNi43MzNjMCAyNy41MjkgMTYuMTE5IDUyLjUwOCA0MS4yMDIgNjMuODVsNTcuOTk0IDI2LjIyNGM5LjUxMiA0LjMwMSAyMC4yOTItMi42NTUgMjAuMjkyLTEzLjA5NHYtNjYuOTc3YzAtMTkuOTE2LTEwLjYyMi0zOC4zMi0yNy44NjYtNDguMjg0bC0yOS4zNTktMTYuOTYzdi0xMTguOTE1bDExNC41NzggNjguMDU2IDExNC41NzktNjguMDU2djExOC45MTZsLTI5LjM1OSAxNi45NjNjLTE3LjI0NSA5Ljk2NC0yNy44NjYgMjguMzY4LTI3Ljg2NiA0OC4yODR2NjYuOTc3YzAgMTAuNDQgMTAuNzggMTcuMzk2IDIwLjI5MiAxMy4wOTRsNTcuOTk0LTI2LjIyNGMyNS4wODQtMTEuMzQzIDQxLjIwMi0zNi4zMjEgNDEuMjAyLTYzLjg1di0xMjYuNzM0Yy0uMDAxLTQ4LjgzNi0xOS43OTUtOTMuMDQ5LTUxLjc5NC0xMjUuMDQ3eiIgZmlsbD0iI2IyYjBiYyIvPjxwYXRoIGQ9Im0xMDkuMTU5IDM0MS4wNzR2LTE1Ni43MzNjMC05Mi42MTkgNzEuMi0xNjguNTg3IDE2MS44NDItMTc2LjIwMi00Ljk0Ni0uNDE2LTkuOTQ3LS42MzktMTUtLjYzOS05Ny42NjMgMC0xNzYuODQxIDc5LjE2OS0xNzYuODQxIDE3Ni44NDF2MTI2LjczM2MwIDI2LjI4MSAxNC42OTcgNTAuMjI4IDM3Ljg1NCA2Mi4yMTUtNS4wNjEtOS43NjctNy44NTUtMjAuNzY4LTcuODU1LTMyLjIxNXoiIGZpbGw9IiNhMTlkYWUiLz48Zz48cGF0aCBkPSJtMjU2IDIyNS41NzRjLTQuODA0IDAtOS42MDktMS4yNzYtMTMuODg2LTMuODI3bC0xNTEuODkzLTkwLjU5MmMtMjAuMTIyLTEyLjAwMi0yNi43MDUtMzguMDQzLTE0LjcwNC01OC4xNjUgMy4zMzctNS41OTUgMTAuNTc4LTcuNDI2IDE2LjE3My00LjA4OWwxNjQuMzEgOTcuOTk5IDE2NC4zMS05Ny45OTljNS41OTUtMy4zMzcgMTIuODM2LTEuNTA3IDE2LjE3MyA0LjA4OCAxMi4wMDIgMjAuMTIyIDUuNDE5IDQ2LjE2NC0xNC43MDQgNTguMTY1bC0xNTEuODkyIDkwLjU5MmMtNC4yNzcgMi41NTItOS4wODIgMy44MjgtMTMuODg3IDMuODI4eiIgZmlsbD0iIzc3NzE4YyIvPjwvZz48L2c+PGc+PHBhdGggZD0ibTE3OS4zNTcgMjE4LjQ4M2MtNC4xNDIgMC03LjUgMy4zNTgtNy41IDcuNXYxNi42OTljMCA0LjE0MiAzLjM1OCA3LjUgNy41IDcuNXM3LjUtMy4zNTggNy41LTcuNXYtMTYuNjk5YzAtNC4xNDItMy4zNTgtNy41LTcuNS03LjV6Ii8+PHBhdGggZD0ibTMzMi42NDMgMjUwLjE4MmM0LjE0MiAwIDcuNS0zLjM1OCA3LjUtNy41di0xNi42OTljMC00LjE0Mi0zLjM1OC03LjUtNy41LTcuNXMtNy41IDMuMzU4LTcuNSA3LjV2MTYuNjk5Yy0uMDAxIDQuMTQyIDMuMzU3IDcuNSA3LjUgNy41eiIvPjxwYXRoIGQ9Im0yNDEuNDQ3IDI1OS45OWMtMi43MjItMy4xMjMtNy40Ni0zLjQ0OC0xMC41ODItLjcyNi0zLjEyMyAyLjcyMS0zLjQ0OCA3LjQ1OS0uNzI2IDEwLjU4MiAxMy42ODcgMTUuNzA0IDM4LjA0OSAxNS42ODcgNTEuNzIxIDAgMi43MjItMy4xMjMgMi4zOTctNy44NjEtLjcyNi0xMC41ODItMy4xMjMtMi43MjItNy44NjEtMi4zOTctMTAuNTgyLjcyNi03LjcwOCA4Ljg0NC0yMS40MDQgOC44MzUtMjkuMTA1IDB6Ii8+PHBhdGggZD0ibTQxNi40NzcgNjIuNDMzLTE0Ljg0NyA4Ljg1NWMtNzQuMDM4LTk1LjI4My0yMTcuNDctOTQuODIxLTI5MS4yNDguMDA4bC0xNC44Ni04Ljg2M2MtOS4xNTktNS40NjMtMjAuOTk0LTIuNDczLTI2LjQ1OCA2LjY4OC0xMi42OTQgMjEuMjg0LTcuNjQ5IDQ3LjgwNCAxMC4wNDcgNjMuMTg2LTQuOTUgMTYuODUtNy40NjQgMzQuMzItNy40NjQgNTIuMDE0djEyNi43NDFjMCAzMC40MTEgMTcuOTA1IDU4LjE1OCA0NS42MTUgNzAuNjg4bDIwLjg1IDkuNDI4Yy0yMC40NDcgMjAuNjAyLTQ2LjkwNSA1Ny45NjUtNDYuOTA1IDExMy4zMjIgMCA0LjE0MiAzLjM1OCA3LjUgNy41IDcuNWgzMTQuNTg2YzQuMTQyIDAgNy41LTMuMzU4IDcuNS03LjUgMC0xNS41NDQtMi4xMTEtMzAuNzIyLTYuMjc0LTQ1LjExMS0xLjE1MS0zLjk3OS01LjMxMS02LjI3LTkuMjktNS4xMi0zLjk3OSAxLjE1MS02LjI3MiA1LjMxLTUuMTIgOS4yOSAzLjEwMSAxMC43MTcgNC45NDUgMjEuOTM1IDUuNTAyIDMzLjQ0MWgtNDIuMzA0di0zOS4zNjFjMC00LjE0Mi0zLjM1OC03LjUtNy41LTcuNXMtNy41IDMuMzU4LTcuNSA3LjV2MzkuMzYxaC0xNy45OTNjLTMuNzc0LTM3LjY3Ni0zNS42NjEtNjcuMTkxLTc0LjMxNC02Ny4xOTFzLTcwLjU0IDI5LjUxNS03NC4zMTQgNjcuMTkxaC0xNy45OTN2LTM5LjM2MWMwLTQuMTQyLTMuMzU4LTcuNS03LjUtNy41cy03LjUgMy4zNTgtNy41IDcuNXYzOS4zNjFoLTQyLjMwM2MyLjQxMS00OS42ODQgMjguNDE2LTgyLjM1IDQ2LjQxMS05OS4xNzhsMjIuNDU5IDEwLjE1NmMxMi42MzggNS43MTMgMjcuMzk1LTEuNjY0IDMwLjM2NC0xNS4xNjIgMzIuNTgyIDEwLjEyMyA2Ny45NzcgMTAuMTgzIDEwMC43NTMgMCAyLjk1NSAxMy40MzQgMTcuNjgyIDIwLjg5NyAzMC4zNjQgMTUuMTYybDIyLjQ2LTEwLjE1NmM5LjI4NiA4LjY3OCAyMS4wNzcgMjEuODkxIDMwLjM3NSAzOS41NzYgMS45MjggMy42NjcgNi40NjIgNS4wNzcgMTAuMTMgMy4xNDkgMy42NjYtMS45MjggNS4wNzYtNi40NjMgMy4xNDktMTAuMTI5LTguODA1LTE2Ljc0OS0xOS42MTktMjkuODMyLTI4Ljk2NS0zOS4yMzdsMjAuODQ5LTkuNDI4YzI3LjcxLTEyLjUzIDQ1LjYxNS00MC4yNzYgNDUuNjE1LTcwLjY4OHYtMTI2Ljc0M2MwLTE3LjY5NC0yLjUxNS0zNS4xNjQtNy40NjQtNTIuMDE0IDE3LjY5LTE1LjM3NyAyMi43NDYtNDEuODk0IDEwLjA0Ny02My4xODYtNS40NTMtOS4xMzktMTcuMzIxLTEyLjEzOS0yNi40Ni02LjY4OXptLTE4Ny44OTggNDM0LjU2NmMzLjI5OS0xMi4wNDYgMTQuMzQzLTIwLjkyNCAyNy40MjEtMjAuOTI0czI0LjEyMiA4Ljg3OCAyNy40MjEgMjAuOTI0em0yNy40MjEtNTIuMTg5YzMwLjM3NCAwIDU1LjUyMiAyMi44MDMgNTkuMjIxIDUyLjE5aC0xNi40NThjLTMuNTY1LTIwLjM4MS0yMS4zNzgtMzUuOTI1LTQyLjc2NC0zNS45MjVzLTM5LjE5OCAxNS41NDQtNDIuNzY0IDM1LjkyNWgtMTYuNDU4YzMuNzAxLTI5LjM4OCAyOC44NDktNTIuMTkgNTkuMjIzLTUyLjE5em0tMTY5LjM1Mi0xMzMuNzQ3di0xMjYuNzQxYzAtMTQuNjc2IDEuODc2LTI5LjE4NCA1LjU4NC00My4yNTFsNDEuNjgyIDI0Ljg2djg5Ljg4NWMwIDIuNjc5IDEuNDI5IDUuMTU0IDMuNzQ4IDYuNDk1bDI5LjM2MSAxNi45NjRjMTQuODc3IDguNTk2IDI0LjEyIDI0LjYxIDI0LjEyIDQxLjc5M3Y2Ni45OGMwIDQuOTkyLTUuMTU2IDguMzE4LTkuNzAyIDYuMjYxbC01Ny45OTctMjYuMjI2Yy0yMi4zNTMtMTAuMTA4LTM2Ljc5Ni0zMi40ODktMzYuNzk2LTU3LjAyem0xODcuMDgyLTgyLjg5MSA4OS4zNTUtNTMuMjk0djc2LjYwOWwtMjUuNjEyIDE0Ljc5OGMtMTkuNTAyIDExLjI2Ny0zMS42MTcgMzIuMjU4LTMxLjYxNyA1NC43ODJ2NTYuMTMyYy0zMS4zNDUgMTAuNjczLTY2LjU4IDExLjI4Mi05OS43MTMgMHYtNTYuMTMyYzAtMjIuNTIzLTEyLjExNC00My41MTQtMzEuNjE2LTU0Ljc4MmwtMjUuNjEyLTE0Ljc5OHYtNzYuNjA5bDg5LjM1NiA1My4yOTRjMTAuOTU3IDYuNTM1IDI0LjU3NyA2LjQ5IDM1LjQ1OSAwem0xNTEuNjIxIDgyLjg5MWMwIDI0LjUzMS0xNC40NDMgNDYuOTEyLTM2Ljc5NSA1Ny4wMTlsLTU3Ljk5NyAyNi4yMjZjLTQuNTQ4IDIuMDU4LTkuNzAyLTEuMjcxLTkuNzAyLTYuMjYxIDAtMjIuNDQgMC00NC43NTkgMC02Ni45OCAwLTE3LjE4MyA5LjI0Mi0zMy4xOTcgMjQuMTItNDEuNzkzbDI5LjM2LTE2Ljk2NGMyLjMxOS0xLjM0IDMuNzQ4LTMuODE2IDMuNzQ4LTYuNDk1di04OS44ODRjMTQuOTQ4LTguOTE1IDI2LjQwNC0xNS43NDggNDEuNjgyLTI0Ljg2IDMuNzA4IDE0LjA2NyA1LjU4MyAyOC41NzUgNS41ODMgNDMuMjUxdjEyNi43NDF6bS03LjQwNC0xODYuMzczYy0xNy45MjUgMTAuNjkxLTEzOS40NDYgODMuMTctMTUxLjkwMSA5MC41OTgtNi4xODMgMy42ODctMTMuOTAxIDMuNjkyLTIwLjA5MiAwLTEuODU0LTEuMTA1LTE1Mi4xOTktOTAuNzIyLTE1My44ODktOTEuODg5LTE1Ljc5MS0xMS4xMjYtMTkuMTU4LTMxLjQzNy0xMC4xMTgtNDYuNTk0IDEuMjE1LTIuMDM3IDMuODQ5LTIuNzA2IDUuODktMS40ODlsNDguNyAyOS4wNDZjMy44MjggMi4yODIgOC43NzMuNzQgMTAuNjQzLTMuMjc4IDEuNjA3LTMuNDQ0LjM3Ny03LjYxNi0yLjk1OS05LjYwNWwtMjAuODY0LTEyLjQ0NGM2Ny4xNTctODQuNDIzIDE5Ni42NzktODYuMzUzIDI2NS4yODYtLjAwMmwtMTMyLjY0MyA3OS4xMTMtODYuMTUtNTEuMzgxYy0zLjU4Ny0yLjEzOS04LjE5NS0uOTAyLTEwLjI4NCAyLjYtMi4xMjIgMy41NTgtLjk1OCA4LjE2MiAyLjYgMTAuMjg0IDkzLjg1MiA1NS41MjkgODkuOTEyIDU0LjczMiA5My44MzQgNTQuNzMyIDEuMzI5IDAgMi42NTgtLjM1MyAzLjg0Mi0xLjA1OSA2LjIxNS0zLjcwNyAxNDkuMzQ1LTg5LjA3NCAxNjQuMzE5LTk4LjAwNSAyLjAzNC0xLjIxMyA0LjY3Ny0uNTQ1IDUuODkxIDEuNDg5IDkuOTc2IDE2LjcyNSA0LjMwNyAzOC4wOTYtMTIuMTA1IDQ3Ljg4NHoiLz48L2c+PC9nPjwvc3ZnPg==");
}

EDIT: Make the background-size square even though your image isn't, use the larger dimension for both sides.

3 Likes