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;
}

Login Text Icon1 Min

result

Login Text Icon2 Min

Use Google Material Icons (Person Icon)

We will change it to this icon

Login Text Icon3 Min

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>

Login Text Icon4 Min

Result

Login Text Icon5 Min

Change Login Person Icon

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

Login Text Icon6 Min

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

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

Login Text Icon7 Min