Login text to Icon

Use your Custom Icon Url

Just add this code to Custom CSS and replace Pixabay with your icon url

/* Login text to icon */
.header-display-desktop span.unauth {
    visibility: hidden;
}
.header-display-desktop span.unauth:before {
    visibility: visible;
    content: "";
    background-image: url(https://cdn.pixabay.com/photo/2022/12/22/02/56/heron-7671357_1280.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    top: 9px;
}

result

Use Google Material Icons (Person Icon)

We will change it to this icon

Just add this code to Code Injection Header

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<style>
span.unauth {
    font-size: 0;
}
span.unauth:before {
    content: "\e7fd";
    font-family: 'Material Symbols Outlined';
    font-size: 30px;
    position: relative;
    top: 2px;
}
</style>

Result

Change Login Person Icon

To change color of Login Person Icon, just add Color to existing code

To change Color on One Page, use this code to Page Header Code Injection

<style>
span.unauth:before {
    color: #f1f !important;
}
</style>