how do i change the little house icon?

I just wanted to agree that it is way too small and way too light in color to be clear to users. 

I have not found a way to adjust that though and would love to hear if anyone has. 

Hi ​@oscar_a_wiggy and ​@LisaRollins 

This is targetable via CSS, please see below the code that is required to modify this icon with an Image. Please add the URL for the image you want to display where I have noted in Green.

.header--student .header__left__icon {

background-image:url("logourlgoes here") !important;

background-repeat: no-repeat !important;

background-size: contain !important;

background-position: 50% 50% !important;

background-color: #0990D0;

width:250px;

margin-left: 15px;

margin-top: 10px;

}

.header--student .header__left__icon:hover{ background-color:transparent;

}

.header--student .header__left__icon i{ display:none;

}

.header--student .header__right .company-logo__container img{ display:none;

}

See below a screenshot of what this lools like in the Site > Site builder settings
 

If you have any questions please let me know.

Kind regards

Jon

​@jonsynnott What if we just want to make it bigger? 

Hi ​@LisaRollins 

I had a look at the code and it seems to be an object called .icon-Home, I don’t know how to change the size from 16X16 but I have asked my design team and will let you know when I hear back from them.

Best

Jon

Check this out! thanks folks

Hi John,

That looks great, good Job.

If I can provide any more assistance please let me know.

Have a super week

Jon

​@oscar_a_wiggy I got this and it works on all devices.

.header--student .header__left__icon {
    font-size: 22px; /* changed to 20px */
    position: relative; /* needed for absolute positioning of the text */
    margin-bottom: 2px;
}

.header--student .header__left__icon::after {
    content: "Return"; /* this adds the word */
    display: block;
    font-size: 16px; /* you can adjust this */
    text-align: center;
    margin-top: 2px; /* space between icon and text */
    margin-bottom: 2px;
}

​@oscar_a_wiggy I got this and it works on all devices.

.header--student .header__left__icon {
    font-size: 22px; /* changed to 20px */
    position: relative; /* needed for absolute positioning of the text */
    margin-bottom: 2px;
}

.header--student .header__left__icon::after {
    content: "Return"; /* this adds the word */
    display: block;
    font-size: 16px; /* you can adjust this */
    text-align: center;
    margin-top: 2px; /* space between icon and text */
    margin-bottom: 2px;
}

 

Always great information ​@charles.zimmerman 

Thank you