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

đŸ“± Mobile Apps
44

Yeah, it's great. As of this morning (my time). Just last week I shortened a few of my device names, but this will mean I wont have to do any more. Thanks!

2 Likes
45

Thanks. I was thinking because there were instructions to right click on the tile you wanted to change that you would be able to save the changes in the Chrome Inspector screen. Thanks for the explanation, I think I get it now Mike.

1 Like
46

@markus Any idea why the title isn’t in line between the tiles?

image
37BC58BF-3DBB-4646-BB3D-57F14805B1F8.jpeg1125×343 49.1 KB

47

Show me the CSS, please?

48

I found out it has to do with the lenght of the text. If "too" long it moves up. If I rotate the screen or look on my PC, it looks good.

.tile-title:after {
    visibility: visible;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    white-space: nowrap !important;
}

#tile-0 .tile-title {
    visibility: hidden;
}
#tile-0 .tile-title:after {
    content: 'LĂ„s nere';
}

#tile-1 .tile-title {
    visibility: hidden;
}
#tile-1 .tile-title:after {
    content: 'Dörr nere';
}

#tile-2 .tile-title {
    visibility: hidden;
}
#tile-2 .tile-title:after {
    content: 'Anna hemma?';
}

#tile-3 .tile-title {
    visibility: hidden;
}
#tile-3 .tile-title:after {
    content: 'Ella hemma?';
}

#tile-4 .tile-title {
    visibility: hidden;
}
#tile-4 .tile-title:after {
    content: 'Tommy hemma?';
}

#tile-7 .tile-title {
    visibility: hidden;
}
#tile-7 .tile-title:after {
    content: 'SlÀck alla lampor';
}

#tile-8 .tile-title {
    visibility: hidden;
}
#tile-8 .tile-title:after {
    content: 'TĂ€nd alla lampor';
}

#tile-9 .tile-title {
    visibility: hidden;
}
#tile-9 .tile-title:after {
    content: 'Tv-lampor';
}

#tile-10 .tile-title {
    visibility: hidden;
}
#tile-10 .tile-title:after {
    content: 'Nattuggla';
}

Landscape mode:

image
image.png1080×156 9.3 KB

UPDATE
Renamed the 4 tiles but the name still does not show in a straight line...

image
image.png1080×313 18.5 KB

49

It follows the original text’s wrapping. It is only hidden. For this type of issue another styling would be needed. I’ll have a look at it later when I’m in front of the computer.

EDIT:
@ktd The below should work better, tell me how it goes...

.tile-title::after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: inherit;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}

#tile-33 .tile-title, #tile-50 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}
#tile-33 .tile-title:after {
    content: 'Lights - Guest Bath Basin';
}
#tile-50 .tile-title:after {
    content: 'Lights - Guest Bath Basin';
}

If you want to set the title of ALL tiles, just hide all like this first:

.tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}

or just multiple:

#tile-33 .tile-title, #tile-50 .tile-title, #tile-16 .tile-title {
    visibility: hidden;
    white-space: nowrap !important;
    overflow: unset;
}

This MAY not be pixel perfect on mobile devices, you could try "left: 0;" instead of "left: inherit;"

5 Likes
50

Seems like the text is left aligned now.

image
1B21201A-9A90-4C59-9E47-C1653560FBBC.jpeg1125×954 59.6 KB

51

sorry, forgot "align: center;", code updated above.

52

Speaking of centered, adding the below fixes as far as I can see, the issue of the icon not being centered. It is still not pixel perfect centered, but better than before. If anyone tries it and finds any ill effects, please do tell.

*, :after, :before {
    box-sizing: unset;
}
53

Hmm, didn’t make any different for me.

54

It should, did you refresh the page?

55

Yes, tried in browser and the Hubitat app as well.

56

My bad, one more line I didn't copy out from my own CSS:

right: 0;

Sorry...

1 Like
57

BAM! That hit the spot. :slight_smile:
Thank you very much.

1 Like
58

Now I have better CSS for myself as well, so all good :slight_smile:

59

I just realized, although "align" works, it really should be "text-align" to be 100% correct...

1 Like
60

@ktd I did see you want things in Swedish, if you look for the different "state" tags, like open/closed, locked/unlocked (don't forget the class "unknown") etc, you can do something like this:

div.open div {
    display: none;
}
div.open:after {
    content: 'Öppen';
    position: relative;
    display: block;
}
div.closed div {
    display: none;
}
div.closed:after {
    content: 'StÀngd';
    position: relative;
    display: block;
}

div.on div {
    display: none;
}
div.on:after {
    content: 'PĂ„';
    position: relative;
    display: block;
}
div.off div {
    display: none;
}
div.off:after {
    content: 'Av';
    position: relative;
    display: block;
}
div.Sending\.\.\. div {
   display: none;
}
div.Sending\.\.\.:after {
  content: 'Skickar...';
  position: relative;
  display: block;
}
div.unknown div {
    display: none;
}
div.unknown:after {
    content: 'OkÀnd';
    position: relative;
    display: block;
}
1 Like
61

If you want to use different icons for the tiles, but still want them to change with on/off, you can replace what the content is to one of the other available icons (this icon library is also possible with some additional modifications, see below), but all he icons listed in this post will work.

Eg. to make all motion icons when inactive to be an up arrow and active a down arrow:

.he-motion-sensor:before {
    content: "\ea3a";
}
.he-running:before {
    content: "\ea3e";
}

To use it with the icons from material.io (not ALL exist, most do, but try and you'll know):

.he-motion-sensor:before {
    font-family: 'Material Icons' !important;
    content: "pause";
}
.he-running:before {
    font-family: 'Material Icons' !important;
    content: "play_arrow";
}

These are all the original ones found in the tiles editor (can be found in a style tag in the html code of the HE):

.he-add_1:before{
    content:"\e906"
}
.he-add_2:before{
    content:"\e909"
}
.he-advanced_1:before{
    content:"\e916"
}
.he-apps_1:before{
    content:"\ea32"
}
.he-apps_2:before{
    content:"\ea33"
}
.he-community_1:before{
    content:"\ea36"
}
.he-community_2:before{
    content:"\ea37"
}
.he-devices_1:before{
    content:"\ea47"
}
.he-devices_2:before{
    content:"\ea48"
}
.he-discovery_1:before{
    content:"\ea4b"
}
.he-discovery_3:before{
    content:"\ea4d"
}
.he-events_2:before{
    content:"\ea5c"
}
.he-exclude_1:before{
    content:"\ea5e"
}
.he-exclude_3:before{
    content:"\ea60"
}
.he-help_1:before{
    content:"\ea62"
}
.he-help_2:before{
    content:"\ea63"
}
.he-hubevents_2:before{
    content:"\ea66"
}
.he-info_1:before{
    content:"\ea68"
}
.he-info_3:before{
    content:"\ea6a"
}
.he-location_1:before{
    content:"\ea6c"
}
.he-location_3:before{
    content:"\ea6e"
}
.he-locationevents_2:before{
    content:"\ea73"
}
.he-logs_2:before{
    content:"\ea75"
}
.he-logs_4:before{
    content:"\ea77"
}
.he-reboothub_1:before{
    content:"\e918"
}
.he-reboothub_2:before{
    content:"\e919"
}
.he-repair_1:before{
    content:"\e93a"
}
.he-repair_2:before{
    content:"\ea12"
}
.he-settings_1:before{
    content:"\ea17"
}
.he-shutdown_1:before{
    content:"\ea79"
}
.he-shutdown_3:before{
    content:"\ea7b"
}
.he-acceleration_active:before{
    content:"\ebd3"
}
.he-acceleration_inactive:before{
    content:"\ebd9"
}
.he-address-book1:before{
    content:"\e944"
}
.he-aid-kit:before{
    content:"\e998"
}
.he-air_filter:before{
    content:"\ecc7"
}
.he-alarm:before{
    content:"\e950"
}
.he-alarm1:before{
    content:"\ecc9"
}
.he-alarm_2:before{
    content:"\ecc8"
}
.he-alexa:before{
    content:"\ed31"
}
.he-amazon2:before{
    content:"\eaf4"
}
.he-android1:before{
    content:"\eac0"
}
.he-apple1:before{
    content:"\eaf8"
}
.he-appointment:before{
    content:"\ecca"
}
.he-apps_11:before{
    content:"\ea05"
}
.he-apps_21:before{
    content:"\ea06"
}
.he-arrival:before{
    content:"\eccb"
}
.he-arrow-down-left2:before{
    content:"\ea3f"
}
.he-arrow-down-right2:before{
    content:"\ea3d"
}
.he-arrow-down2:before{
    content:"\ea3e"
}
.he-arrow-left2:before{
    content:"\ea40"
}
.he-arrow-right2:before{
    content:"\ea3c"
}
.he-arrow-up-left2:before{
    content:"\ea39"
}
.he-arrow-up-right2:before{
    content:"\ea3b"
}
.he-arrow-up2:before{
    content:"\ea3a"
}
.he-attachment:before{
    content:"\e9cd"
}
.he-axis:before{
    content:"\eaf3"
}
.he-axis_2:before{
    content:"\eaf2"
}
.he-axis_3:before{
    content:"\ed6a"
}
.he-backward2:before{
    content:"\ea1f"
}
.he-barcode1:before{
    content:"\e937"
}
.he-bathtub1:before{
    content:"\ed33"
}
.he-battery_25:before{
    content:"\ec54"
}
.he-battery_25_color:before{
    content:"\ebdc"
}
.he-battery_25_filled:before{
    content:"\ec53"
}
.he-battery_50:before{
    content:"\ec56"
}
.he-battery_50_color:before{
    content:"\ebdd"
}
.he-battery_50_filled:before{
    content:"\ec55"
}
.he-battery_75_color:before{
    content:"\ebde"
}
.he-battery_75_to_100:before{
    content:"\ec57"
}
.he-battery_empty:before{
    content:"\ec59"
}
.he-battery_empty_filled:before{
    content:"\ec58"
}
.he-battery_full:before{
    content:"\ec5a"
}
.he-battery_full_color:before{
    content:"\ebe2"
}
.he-battery_large:before{
    content:"\eccd"
}
.he-battery_large_filled:before{
    content:"\eccc"
}
.he-battery_low_color:before{
    content:"\ebe3"
}
.he-beach-chair:before{
    content:"\ec4e"
}
.he-bed_1:before{
    content:"\eb0d"
}
.he-bed_2:before{
    content:"\ed34"
}
.he-bed_3:before{
    content:"\eb0e"
}
.he-bed_4:before{
    content:"\eb0f"
}
.he-bed_5:before{
    content:"\ed35"
}
.he-bell1:before{
    content:"\e951"
}
.he-bin:before{
    content:"\e9ac"
}
.he-bin2:before{
    content:"\e9ad"
}
.he-blind1:before{
    content:"\ecb6"
}
.he-blocked:before{
    content:"\ea0e"
}
.he-bluetooth1:before{
    content:"\eb11"
}
.he-bluetooth_headphones:before{
    content:"\eb10"
}
.he-book1:before{
    content:"\e91f"
}
.he-bookmark1:before{
    content:"\e9d2"
}
.he-bookmarks:before{
    content:"\e9d3"
}
.he-books:before{
    content:"\e920"
}
.he-box-add:before{
    content:"\e95e"
}
.he-box-remove:before{
    content:"\e95f"
}
.he-briefcase1:before{
    content:"\e9ae"
}
.he-brightness-contrast:before{
    content:"\e9d6"
}
.he-bubble:before{
    content:"\e96b"
}
.he-bubble2:before{
    content:"\e96e"
}
.he-bubbles:before{
    content:"\e96c"
}
.he-bubbles2:before{
    content:"\e96d"
}
.he-bubbles3:before{
    content:"\e96f"
}
.he-bubbles4:before{
    content:"\e970"
}
.he-bug1:before{
    content:"\e999"
}
.he-bulb_1:before{
    content:"\ecda"
}
.he-bulb_2:before{
    content:"\ecdb"
}
.he-bulb_4:before{
    content:"\ec68"
}
.he-bulb_6:before{
    content:"\eb12"
}
.he-bulb_off:before{
    content:"\ebe4"
}
.he-bulb_on:before{
    content:"\ebec"
}
.he-calculator1:before{
    content:"\e940"
}
.he-calendar1:before{
    content:"\e953"
}
.he-calendar2:before{
    content:"\ecbe"
}
.he-calendar_2:before{
    content:"\ecdc"
}
.he-camera1:before{
    content:"\e90f"
}
.he-cancel-circle:before{
    content:"\ea0d"
}
.he-car1:before{
    content:"\ec69"
}
.he-cctv:before{
    content:"\ed36"
}
.he-cd_rom:before{
    content:"\eb13"
}
.he-ceiling_lamp:before{
    content:"\eb14"
}
.he-ceiling_lamp_2:before{
    content:"\ed37"
}
.he-chair_lounge:before{
    content:"\ed3b"
}
.he-chandelier_2:before{
    content:"\eb15"
}
.he-checkbox-checked:before{
    content:"\ea52"
}
.he-checkbox-unchecked:before{
    content:"\ea53"
}
.he-checkmark:before{
    content:"\ea10"
}
.he-checkmark2:before{
    content:"\ea11"
}
.he-chrome1:before{
    content:"\ead9"
}
.he-circle-down:before{
    content:"\ea43"
}
.he-circle-left:before{
    content:"\ea44"
}
.he-circle-right:before{
    content:"\ea42"
}
.he-circle-up:before{
    content:"\ea41"
}
.he-circuit:before{
    content:"\ecdd"
}
.he-clean:before{
    content:"\ec6a"
}
.he-cleaning_1:before{
    content:"\ec6b"
}
.he-cleaning_2:before{
    content:"\ec6c"
}
.he-cleaning_3:before{
    content:"\ec6d"
}
.he-clipboard1:before{
    content:"\e9b8"
}
.he-clock:before{
    content:"\e94e"
}
.he-clock2:before{
    content:"\e94f"
}
.he-cloud-check:before{
    content:"\e9c4"
}
.he-cloud-download1:before{
    content:"\e9c2"
}
.he-cloud-upload1:before{
    content:"\e9c3"
}
.he-cloud1:before{
    content:"\e9c1"
}
.he-co2:before{
    content:"\ecb7"
}
.he-codepen1:before{
    content:"\eae8"
}
.he-cog1:before{
    content:"\e994"
}
.he-cogs1:before{
    content:"\e995"
}
.he-color_palette:before{
    content:"\ecde"
}
.he-command:before{
    content:"\ea4e"
}
.he-compass1:before{
    content:"\e949"
}
.he-compass2:before{
    content:"\e94a"
}
.he-computer:before{
    content:"\ecb0"
}
.he-computer_2:before{
    content:"\eb16"
}
.he-connection:before{
    content:"\e91b"
}
.he-contact_closed:before{
    content:"\eb91"
}
.he-contact_open:before{
    content:"\eb92"
}
.he-contrast:before{
    content:"\e9d5"
}
.he-copy1:before{
    content:"\e92c"
}
.he-crop1:before{
    content:"\ea57"
}
.he-cross:before{
    content:"\ea0f"
}
.he-ctrl:before{
    content:"\ea50"
}
.he-customer_support:before{
    content:"\eaeb"
}
.he-danger:before{
    content:"\ecbb"
}
.he-dashboard1:before{
    content:"\ecb2"
}
.he-dashboards:before{
    content:"\ecdf"
}
.he-database1:before{
    content:"\e964"
}
.he-default_dashboard_icon:before{
    content:"\e93b"
}
.he-delicious1:before{
    content:"\eacd"
}
.he-dimmer_high:before{
    content:"\ebff"
}
.he-dimmer_low:before{
    content:"\ec10"
}
.he-dimmer_medium:before{
    content:"\ec17"
}
.he-dining-chair:before{
    content:"\ecc2"
}
.he-dinner:before{
    content:"\ecc3"
}
.he-discover:before{
    content:"\eaec"
}
.he-display:before{
    content:"\e956"
}
.he-door-1:before{
    content:"\ecbc"
}
.he-door_3:before{
    content:"\ec6e"
}
.he-door_closed:before{
    content:"\ec6f"
}
.he-door_enter:before{
    content:"\ec70"
}
.he-door_exit_2:before{
    content:"\ec71"
}
.he-door_lock:before{
    content:"\ed3c"
}
.he-door_open:before{
    content:"\ec72"
}
.he-door_remote:before{
    content:"\ed3d"
}
.he-download1:before{
    content:"\e960"
}
.he-download2:before{
    content:"\e9c5"
}
.he-download3:before{
    content:"\e9c7"
}
.he-downstairs:before{
    content:"\ed6c"
}
.he-drawer:before{
    content:"\e95c"
}
.he-drawer2:before{
    content:"\e95d"
}
.he-dribbble1:before{
    content:"\eaa7"
}
.he-drive:before{
    content:"\e963"
}
.he-drive1:before{
    content:"\eb20"
}
.he-drop:before{
    content:"\ec51"
}
.he-dropbox1:before{
    content:"\eaae"
}
.he-dryer:before{
    content:"\eb26"
}
.he-dryer_2:before{
    content:"\eb25"
}
.he-earth:before{
    content:"\e9ca"
}
.he-edge1:before{
    content:"\eadc"
}
.he-eject1:before{
    content:"\ea25"
}
.he-electricity:before{
    content:"\ece0"
}
.he-embed:before{
    content:"\ea7f"
}
.he-embed2:before{
    content:"\ea80"
}
.he-enlarge:before{
    content:"\e989"
}
.he-enlarge2:before{
    content:"\e98b"
}
.he-enter:before{
    content:"\ea13"
}
.he-envelop:before{
    content:"\e945"
}
.he-equalizer:before{
    content:"\e992"
}
.he-equalizer2:before{
    content:"\e993"
}
.he-ethernet:before{
    content:"\ecc6"
}
.he-exit:before{
    content:"\ea14"
}
.he-eye-blocked:before{
    content:"\e9d1"
}
.he-eye-minus:before{
    content:"\e9d0"
}
.he-eye-plus:before{
    content:"\e9cf"
}
.he-eye1:before{
    content:"\e9ce"
}
.he-eyedropper1:before{
    content:"\e90a"
}
.he-facebook1:before{
    content:"\ea90"
}
.he-facebook2:before{
    content:"\ea91"
}
.he-facebook3:before{
    content:"\eb2a"
}
.he-facebook_2:before{
    content:"\eb27"
}
.he-fan:before{
    content:"\ecb8"
}
.he-fan_2:before{
    content:"\eb2b"
}
.he-fan_auto:before{
    content:"\e980"
}
.he-fan_high:before{
    content:"\e9b0"
}
.he-fan_low:before{
    content:"\e9e4"
}
.he-fan_med:before{
    content:"\e9fc"
}
.he-fan_med_high:before{
    content:"\e9ec"
}
.he-fan_med_low:before{
    content:"\e9f4"
}
.he-fan_off:before{
    content:"\e93c"
}
.he-fan_on:before{
    content:"\ea04"
}
.he-feed1:before{
    content:"\e91d"
}
.he-file-empty:before{
    content:"\e924"
}
.he-file-music:before{
    content:"\e928"
}
.he-file-picture:before{
    content:"\e927"
}
.he-file-play:before{
    content:"\e929"
}
.he-file-text1:before{
    content:"\e922"
}
.he-file-text2:before{
    content:"\e926"
}
.he-file-video:before{
    content:"\e92a"
}
.he-file-zip:before{
    content:"\e92b"
}
.he-file1:before{
    content:"\eaee"
}
.he-file_2:before{
    content:"\eaed"
}
.he-files-empty:before{
    content:"\e925"
}
.he-film1:before{
    content:"\e913"
}
.he-filter1:before{
    content:"\ea5b"
}
.he-filter2:before{
    content:"\ed2d"
}
.he-finder:before{
    content:"\eabf"
}
.he-fingerprint:before{
    content:"\ecaf"
}
.he-fire-alarm:before{
    content:"\ecba"
}
.he-fire1:before{
    content:"\e9a9"
}
.he-fire2:before{
    content:"\ece1"
}
.he-fire_alarm_clear:before{
    content:"\ec23"
}
.he-firefox1:before{
    content:"\eada"
}
.he-fireplace:before{
    content:"\ed3e"
}
.he-first:before{
    content:"\ea21"
}
.he-fist:before{
    content:"\ece3"
}
.he-fist_2:before{
    content:"\ece2"
}
.he-flag1:before{
    content:"\e9cc"
}
.he-flag2:before{
    content:"\ece4"
}
.he-flash1:before{
    content:"\ec73"
}
.he-flickr1:before{
    content:"\eaa3"
}
.he-flickr2:before{
    content:"\eaa4"
}
.he-flickr3:before{
    content:"\eaa5"
}
.he-flickr4:before{
    content:"\eaa6"
}
.he-floppy-disk:before{
    content:"\e962"
}
.he-folder-download:before{
    content:"\e933"
}
.he-folder-minus:before{
    content:"\e932"
}
.he-folder-open1:before{
    content:"\e930"
}
.he-folder-plus:before{
    content:"\e931"
}
.he-folder-upload:before{
    content:"\e934"
}
.he-folder1:before{
    content:"\e92f"
}
.he-forward1:before{
    content:"\e969"
}
.he-forward3:before{
    content:"\ea20"
}
.he-gaming_controler:before{
    content:"\eb2c"
}
.he-gaming_controller_2:before{
    content:"\eb2d"
}
.he-gaming_controller_3:before{
    content:"\eb2e"
}
.he-garage_closed:before{
    content:"\ec24"
}
.he-garage_open:before{
    content:"\ec2e"
}
.he-gas_warning:before{
    content:"\ec74"
}
.he-gauge:before{
    content:"\ece6"
}
.he-gauge_2:before{
    content:"\ece5"
}
.he-gift1:before{
    content:"\e99f"
}
.he-git1:before{
    content:"\eae7"
}
.he-github1:before{
    content:"\eab0"
}
.he-glass1:before{
    content:"\e9a0"
}
.he-glass2:before{
    content:"\e9a1"
}
.he-gmail:before{
    content:"\eb30"
}
.he-google-drive:before{
    content:"\ea8f"
}
.he-google1:before{
    content:"\ea88"
}
.he-google2:before{
    content:"\ea89"
}
.he-google3:before{
    content:"\ea8a"
}
.he-google_play:before{
    content:"\eb3b"
}
.he-grid:before{
    content:"\ed2e"
}
.he-hammer:before{
    content:"\e996"
}
.he-hand_3:before{
    content:"\ece7"
}
.he-hand_wave:before{
    content:"\ece8"
}
.he-hanging_lights:before{
    content:"\eb43"
}
.he-hanging_roof_lamp:before{
    content:"\eb44"
}
.he-hangouts:before{
    content:"\ea8e"
}
.he-headphones1:before{
    content:"\e910"
}
.he-heart1:before{
    content:"\e9da"
}
.he-help1:before{
    content:"\eaef"
}
.he-history1:before{
    content:"\e94d"
}
.he-home1:before{
    content:"\e900"
}
.he-home2:before{
    content:"\e901"
}
.he-home3:before{
    content:"\e902"
}
.he-hour-glass:before{
    content:"\e979"
}
.he-house_1:before{
    content:"\ed3f"
}
.he-house_2:before{
    content:"\ed40"
}
.he-house_3:before{
    content:"\ed41"
}
.he-house_4:before{
    content:"\ed42"
}
.he-house_5:before{
    content:"\ed43"
}
.he-humidity:before{
    content:"\ecf4"
}
.he-humidity_filled:before{
    content:"\ecf3"
}
.he-image1:before{
    content:"\e90d"
}
.he-images:before{
    content:"\e90e"
}
.he-infinite:before{
    content:"\ea2f"
}
.he-info1:before{
    content:"\ea0c"
}
.he-insert-template:before{
    content:"\ea72"
}
.he-instagram1:before{
    content:"\ea92"
}
.he-integrated_circuit:before{
    content:"\ecf5"
}
.he-key1:before{
    content:"\e98d"
}
.he-keyboard:before{
    content:"\e955"
}
.he-keypad_1:before{
    content:"\eb45"
}
.he-keypad_2:before{
    content:"\eb46"
}
.he-kitchen:before{
    content:"\ed44"
}
.he-lab:before{
    content:"\e9aa"
}
.he-lamp_1:before{
    content:"\ed4d"
}
.he-lamp_hanging:before{
    content:"\ed4e"
}
.he-laptop1:before{
    content:"\e957"
}
.he-last:before{
    content:"\ea22"
}
.he-laundry:before{
    content:"\ec75"
}
.he-leaf1:before{
    content:"\e9a4"
}
.he-less_plus_signs:before{
    content:"\ecf6"
}
.he-lifebuoy:before{
    content:"\e941"
}
.he-lightbulb:before{
    content:"\eca0"
}
.he-link1:before{
    content:"\e9cb"
}
.he-link2:before{
    content:"\ecf8"
}
.he-link_broken:before{
    content:"\ecf7"
}
.he-linkedin1:before{
    content:"\eac9"
}
.he-linkedin2:before{
    content:"\eaca"
}
.he-list-numbered:before{
    content:"\e9b9"
}
.he-list1:before{
    content:"\e9ba"
}
.he-list2:before{
    content:"\e9bb"
}
.he-list3:before{
    content:"\ed2f"
}
.he-location:before{
    content:"\e947"
}
.he-location2:before{
    content:"\e948"
}
.he-lock1:before{
    content:"\e98f"
}
.he-logo-mark:before{
    content:"\e908"
}
.he-logo-vertical-white:before{
    content:"\e907";
    color:#fff
}
.he-loop:before{
    content:"\ea2d"
}
.he-loop2:before{
    content:"\ea2e"
}
.he-magic-wand:before{
    content:"\e997"
}
.he-magnet1:before{
    content:"\e9ab"
}
.he-man:before{
    content:"\e9dc"
}
.he-man-woman:before{
    content:"\e9de"
}
.he-map1:before{
    content:"\e94b"
}
.he-map2:before{
    content:"\e94c"
}
.he-menu:before{
    content:"\e9bd"
}
.he-menu2:before{
    content:"\e9be"
}
.he-menu3:before{
    content:"\e9bf"
}
.he-menu4:before{
    content:"\e9c0"
}
.he-meter:before{
    content:"\e9a6"
}
.he-meter1:before{
    content:"\ecf9"
}
.he-meter2:before{
    content:"\e9a7"
}
.he-mic:before{
    content:"\e91e"
}
.he-microsoft:before{
    content:"\eb51"
}
.he-microwave:before{
    content:"\ecc5"
}
.he-minus1:before{
    content:"\ea0b"
}
.he-mobile1:before{
    content:"\e958"
}
.he-mobile2:before{
    content:"\e959"
}
.he-mode_away:before{
    content:"\ec39"
}
.he-mode_cleaning:before{
    content:"\ec3a"
}
.he-mode_day:before{
    content:"\ec3b"
}
.he-mode_default:before{
    content:"\ec3c"
}
.he-mode_evening:before{
    content:"\ec3d"
}
.he-mode_night:before{
    content:"\ec3e"
}
.he-mode_vacation:before{
    content:"\ec3f"
}
.he-monitor:before{
    content:"\eb55"
}
.he-motion-sensor:before{
    content:"\ed64"
}
.he-motion_detector_1:before{
    content:"\ec76"
}
.he-motion_detector_2:before{
    content:"\ec82"
}
.he-motion_detector_3:before{
    content:"\ecfb"
}
.he-motion_detector_3_filled:before{
    content:"\ecfa"
}
.he-motion_detector_4:before{
    content:"\ecfc"
}
.he-mug:before{
    content:"\e9a2"
}
.he-music1:before{
    content:"\e911"
}
.he-music_player:before{
    content:"\eb56"
}
.he-mute:before{
    content:"\ecfd"
}
.he-netflix:before{
    content:"\eb57"
}
.he-new-tab:before{
    content:"\ea7e"
}
.he-newspaper:before{
    content:"\e904"
}
.he-next2:before{
    content:"\ea24"
}
.he-next_track:before{
    content:"\ecfe"
}
.he-night_1:before{
    content:"\ec83"
}
.he-night_2:before{
    content:"\ec84"
}
.he-not_present:before{
    content:"\eb8f"
}
.he-notification:before{
    content:"\ea08"
}
.he-oculus_rift:before{
    content:"\eb5f"
}
.he-office:before{
    content:"\e903"
}
.he-onedrive:before{
    content:"\eaaf"
}
.he-opt:before{
    content:"\ea51"
}
.he-outlet:before{
    content:"\ed30"
}
.he-outlet_3:before{
    content:"\ec85"
}
.he-outlet_off:before{
    content:"\e97c"
}
.he-padlock_locked:before{
    content:"\ec86"
}
.he-padlock_unlocked:before{
    content:"\ec87"
}
.he-paint-format:before{
    content:"\e90c"
}
.he-pantone_1:before{
    content:"\ecff"
}
.he-paste1:before{
    content:"\e92d"
}
.he-pause-outlined-big-symbol:before{
    content:"\ecbd"
}
.he-pause2:before{
    content:"\ea1d"
}
.he-pause_circle:before{
    content:"\ed00"
}
.he-pencil1:before{
    content:"\e905"
}
.he-phone-hang-up:before{
    content:"\e943"
}
.he-phone1:before{
    content:"\e942"
}
.he-pie-chart1:before{
    content:"\e99a"
}
.he-pinterest3:before{
    content:"\eb60"
}
.he-placeholder:before{
    content:"\ed32"
}
.he-placeholder_1:before{
    content:"\ec88"
}
.he-play1:before{
    content:"\e912"
}
.he-play3:before{
    content:"\ea1c"
}
.he-play_button:before{
    content:"\ed01"
}
.he-playstation:before{
    content:"\eb62"
}
.he-playstation_logo:before{
    content:"\eb61"
}
.he-plug1:before{
    content:"\ecb9"
}
.he-plug_1:before{
    content:"\ec89"
}
.he-plug_2:before{
    content:"\ed4f"
}
.he-plug_3:before{
    content:"\ed50"
}
.he-plug_4:before{
    content:"\ec8a"
}
.he-plug_5:before{
    content:"\ed02"
}
.he-plug_6:before{
    content:"\ed03"
}
.he-plus1:before{
    content:"\ea0a"
}
.he-podcast1:before{
    content:"\e91c"
}
.he-portrait:before{
    content:"\ed68"
}
.he-power:before{
    content:"\e9b5"
}
.he-power-cord:before{
    content:"\e9b7"
}
.he-power_off:before{
    content:"\ec40"
}
.he-power_on:before{
    content:"\ec41"
}
.he-present:before{
    content:"\eb90"
}
.he-previous2:before{
    content:"\ea23"
}
.he-price-tag:before{
    content:"\e935"
}
.he-price-tags:before{
    content:"\e936"
}
.he-printer:before{
    content:"\e954"
}
.he-profile:before{
    content:"\e923"
}
.he-property:before{
    content:"\ecb1"
}
.he-psp:before{
    content:"\eb63"
}
.he-pushpin:before{
    content:"\e946"
}
.he-qrcode1:before{
    content:"\e938"
}
.he-question1:before{
    content:"\ea09"
}
.he-question2:before{
    content:"\ecbf"
}
.he-question_1:before{
    content:"\eaf0"
}
.he-question_2:before{
    content:"\eaf1"
}
.he-quotes-left:before{
    content:"\e977"
}
.he-quotes-right:before{
    content:"\e978"
}
.he-radio-checked:before{
    content:"\ea54"
}
.he-radio-checked2:before{
    content:"\ea55"
}
.he-radio-unchecked:before{
    content:"\ea56"
}
.he-reddit1:before{
    content:"\eac6"
}
.he-redo:before{
    content:"\e966"
}
.he-redo2:before{
    content:"\e968"
}
.he-relay_off:before{
    content:"\ec4a"
}
.he-relay_on:before{
    content:"\ec4b"
}
.he-repair1:before{
    content:"\ec96"
}
.he-reply1:before{
    content:"\e96a"
}
.he-resize:before{
    content:"\ec4f"
}
.he-road1:before{
    content:"\e9b1"
}
.he-rocket1:before{
    content:"\e9a5"
}
.he-router_1:before{
    content:"\ed04"
}
.he-router_2:before{
    content:"\ed05"
}
.he-router_3:before{
    content:"\ed06"
}
.he-router_4:before{
    content:"\ed07"
}
.he-rss1:before{
    content:"\ea9b"
}
.he-rss2:before{
    content:"\ea9c"
}
.he-running:before{
    content:"\ed08"
}
.he-safari1:before{
    content:"\eadd"
}
.he-samsung:before{
    content:"\ed09"
}
.he-scissors1:before{
    content:"\ea5a"
}
.he-search1:before{
    content:"\e986"
}
.he-security_system:before{
    content:"\ed51"
}
.he-sensor:before{
    content:"\ed66"
}
.he-sensor_1:before{
    content:"\ed65"
}
.he-sensor_2:before{
    content:"\ed0a"
}
.he-sensor_3:before{
    content:"\ed0b"
}
.he-sensor_4:before{
    content:"\ed63"
}
.he-sensor_5:before{
    content:"\ed0c"
}
.he-settings1:before{
    content:"\ec4d"
}
.he-setup:before{
    content:"\ec4c"
}
.he-shades_closed:before{
    content:"\eba1"
}
.he-shades_open:before{
    content:"\ebaa"
}
.he-shades_partially_open:before{
    content:"\ebbb"
}
.he-share1:before{
    content:"\ea7d"
}
.he-share2:before{
    content:"\ea82"
}
.he-shield1:before{
    content:"\e9b4"
}
.he-shift:before{
    content:"\ea4f"
}
.he-shower1:before{
    content:"\ed52"
}
.he-shrink:before{
    content:"\e98a"
}
.he-shrink2:before{
    content:"\e98c"
}
.he-shuffle:before{
    content:"\ea30"
}
.he-sink:before{
    content:"\ed54"
}
.he-sink_2:before{
    content:"\ed53"
}
.he-siren:before{
    content:"\ed17"
}
.he-siren_and_alarm:before{
    content:"\ed0d"
}
.he-skype1:before{
    content:"\eac5"
}
.he-smoke_detector:before{
    content:"\ed19"
}
.he-smoke_detector_2:before{
    content:"\ed18"
}
.he-snowflake:before{
    content:"\ed1a"
}
.he-sofa:before{
    content:"\ed69"
}
.he-sound_on:before{
    content:"\ed1c"
}
.he-sound_on_loud:before{
    content:"\ed1b"
}
.he-soundcloud1:before{
    content:"\eac3"
}
.he-soundcloud2:before{
    content:"\eac4"
}
.he-speaker:before{
    content:"\ed1e"
}
.he-speaker_1:before{
    content:"\ed55"
}
.he-speaker_2:before{
    content:"\ed56"
}
.he-speaker_3:before{
    content:"\eb69"
}
.he-speaker_off:before{
    content:"\ed1d"
}
.he-sphere:before{
    content:"\e9c9"
}
.he-spinner11:before{
    content:"\e984"
}
.he-spoon-knife:before{
    content:"\e9a3"
}
.he-spotify1:before{
    content:"\ea94"
}
.he-spotify2:before{
    content:"\eb6a"
}
.he-square-measument:before{
    content:"\ec50"
}
.he-stack:before{
    content:"\e92e"
}
.he-stackoverflow:before{
    content:"\ead0"
}
.he-stairs:before{
    content:"\ed6b"
}
.he-star-empty:before{
    content:"\e9d7"
}
.he-star-full:before{
    content:"\e9d9"
}
.he-star-half1:before{
    content:"\e9d8"
}
.he-stats-bars:before{
    content:"\e99c"
}
.he-stats-bars2:before{
    content:"\e99d"
}
.he-stats-dots:before{
    content:"\e99b"
}
.he-steam1:before{
    content:"\eaac"
}
.he-steam2:before{
    content:"\eaad"
}
.he-stop2:before{
    content:"\ea1e"
}
.he-stop3:before{
    content:"\ed21"
}
.he-stop_2:before{
    content:"\ed20"
}
.he-stop_2_filled:before{
    content:"\ed1f"
}
.he-stopwatch:before{
    content:"\e952"
}
.he-stove:before{
    content:"\ed57"
}
.he-strikethrough2:before{
    content:"\ec9b"
}
.he-sun:before{
    content:"\e9d4"
}
.he-sun1:before{
    content:"\ec52"
}
.he-sunrise:before{
    content:"\ecc4"
}
.he-sunrise_2:before{
    content:"\ec9c"
}
.he-sunrise_3:before{
    content:"\ec9d"
}
.he-suspension:before{
    content:"\ed67"
}
.he-svg:before{
    content:"\eae9"
}
.he-switch:before{
    content:"\e9b6"
}
.he-switch_2:before{
    content:"\ed25"
}
.he-switch_2_flipped:before{
    content:"\ed22"
}
.he-switch_2_off:before{
    content:"\ec9e"
}
.he-switch_2_off_filled:before{
    content:"\ed23"
}
.he-switch_2_on:before{
    content:"\ec9f"
}
.he-switch_2_on_filled:before{
    content:"\ed24"
}
.he-switch_8:before{
    content:"\ed27"
}
.he-switch_8_closed:before{
    content:"\ed26"
}
.he-switch_off:before{
    content:"\eb98"
}
.he-switch_on:before{
    content:"\ed28"
}
.he-tab:before{
    content:"\ea45"
}
.he-table1:before{
    content:"\ea70"
}
.he-table2:before{
    content:"\ea71"
}
.he-table3:before{
    content:"\ed58"
}
.he-tablet1:before{
    content:"\e95a"
}
.he-tap:before{
    content:"\ed29"
}
.he-target:before{
    content:"\e9b3"
}
.he-telegram1:before{
    content:"\ea95"
}
.he-television_1:before{
    content:"\ed59"
}
.he-television_2:before{
    content:"\ed5a"
}
.he-terminal1:before{
    content:"\ea81"
}
.he-thermometer1:before{
    content:"\ecb5"
}
.he-thermometer_2:before{
    content:"\ed5b"
}
.he-thermometer_3:before{
    content:"\ed5c"
}
.he-thermometer_4:before{
    content:"\ed2a"
}
.he-thermometer_5:before{
    content:"\ed2b"
}
.he-thermostat_6:before{
    content:"\eb6b"
}
.he-thumb-up:before{
    content:"\ecae"
}
.he-ticket1:before{
    content:"\e939"
}
.he-toilet:before{
    content:"\ed5d"
}
.he-tree1:before{
    content:"\e9bc"
}
.he-trello1:before{
    content:"\eab3"
}
.he-trophy1:before{
    content:"\e99e"
}
.he-tumblr1:before{
    content:"\eab9"
}
.he-tumblr2:before{
    content:"\eaba"
}
.he-tux:before{
    content:"\eabd"
}
.he-tv1:before{
    content:"\e95b"
}
.he-twitch1:before{
    content:"\ea9f"
}
.he-twitter1:before{
    content:"\ea96"
}
.he-twitter2:before{
    content:"\eb76"
}
.he-undo1:before{
    content:"\e965"
}
.he-undo2:before{
    content:"\e967"
}
.he-ungroup:before{
    content:"\ea59"
}
.he-unlink1:before{
    content:"\ecb3"
}
.he-unlocked:before{
    content:"\e990"
}
.he-upload1:before{
    content:"\e961"
}
.he-upload2:before{
    content:"\e9c6"
}
.he-upload3:before{
    content:"\e9c8"
}
.he-user-check:before{
    content:"\e975"
}
.he-user-minus:before{
    content:"\e974"
}
.he-user-plus1:before{
    content:"\e973"
}
.he-user-tie:before{
    content:"\e976"
}
.he-user1:before{
    content:"\e971"
}
.he-users1:before{
    content:"\e972"
}
.he-valve:before{
    content:"\eb7a"
}
.he-valve_2:before{
    content:"\eb77"
}
.he-valve_3:before{
    content:"\eb78"
}
.he-valve_4:before{
    content:"\eb79"
}
.he-ventilator:before{
    content:"\eb7b"
}
.he-video-camera1:before{
    content:"\e914"
}
.he-video-player:before{
    content:"\ecc1"
}
.he-vimeo1:before{
    content:"\eaa0"
}
.he-vimeo2:before{
    content:"\eaa1"
}
.he-volume-decrease:before{
    content:"\ea2c"
}
.he-volume-high:before{
    content:"\ea26"
}
.he-volume-increase:before{
    content:"\ea2b"
}
.he-volume-low:before{
    content:"\ea28"
}
.he-volume-medium:before{
    content:"\ea27"
}
.he-volume-mute:before{
    content:"\ea29"
}
.he-volume-mute2:before{
    content:"\ea2a"
}
.he-wardrobe:before{
    content:"\ed61"
}
.he-wardrobe_2:before{
    content:"\ed5e"
}
.he-warning1:before{
    content:"\ea07"
}
.he-washing_machine:before{
    content:"\eb80"
}
.he-washing_machine_2:before{
    content:"\eb7d"
}
.he-washing_machine_3:before{
    content:"\eb7e"
}
.he-washing_machine_4:before{
    content:"\eb7f"
}
.he-water:before{
    content:"\eb82"
}
.he-water_2:before{
    content:"\eb81"
}
.he-water_dry:before{
    content:"\eb99"
}
.he-water_wet:before{
    content:"\eb9e";
    color:#6b6b6b
}
.he-web-design:before{
    content:"\ecc0"
}
.he-whatsapp1:before{
    content:"\ea93"
}
.he-wifi1:before{
    content:"\ed2c"
}
.he-wikipedia:before{
    content:"\eac8"
}
.he-window:before{
    content:"\ecb4"
}
.he-window_1:before{
    content:"\ecad"
}
.he-window_2:before{
    content:"\ecac"
}
.he-window_3:before{
    content:"\ed62"
}
.he-windows1:before{
    content:"\eac1"
}
.he-windows8:before{
    content:"\eac2"
}
.he-woman:before{
    content:"\e9dd"
}
.he-wordpress1:before{
    content:"\eab4"
}
.he-wrench1:before{
    content:"\e991"
}
.he-xbox:before{
    content:"\eb88"
}
.he-youtube1:before{
    content:"\ea9d"
}
.he-youtube3:before{
    content:"\eb89";
    color:#777
}
.he-zigbee:before{
    content:"\ea83"
}
.he-zoom-in:before{
    content:"\e987"
}
.he-zoom-out:before{
    content:"\e988"
}
.he-zwave:before{
    content:"\eb8b"
}
2 Likes
62

Another option: can also use FontAwesome (the free version of library is 1500+ icons):
https://fontawesome.com/icons?d=gallery&m=free

So for an example, I want to put a Rebel Alliance icon next to my Roomba title for whatever reason

This icon:
https://fontawesome.com/icons/rebel?style=brands

This is how you use it:
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Here is an exact example:

in the Dashboard > Settings > Advanced > CSS

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

#tile-3 .tile-title::after { font-family: 'Font Awesome 5 Brands'; font-weight: 400; content: '\f1d0'; }

Result

53

5 Likes
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