CSS need help: trying to insert a globe icon before the word "English" on signin page (language selector menu)

Hmm… I don’t have the exact same login page as you so a little tougher to troubleshoot.

What I did, though was add an image before my sign in text LOL which worked fine but when I used your URL nothing appeared.

When trying your URL in a browser it tries to download rather than display.

Perhaps that is part of the issue.

ui-language-selector ui-button-dropdown ui-button-text button:before{
    content: '\f173';
}/*globe icon for lang selector on homepage*/

Why wouldn’t this work?

ui-language-selector ui-button-dropdown ui-button-text button:before{
    content: '\f173';
}/*globe icon for lang selector on homepage*/

Here is what I used - again - not same place 

.login-form-title::before {
    content:url("https://path/to/image.png");
}

Here is what I get when I use your content.

LOL - I think I just discovered what you were trying to do.

Picture is worth a thousand words…

This is where you are now..?

Ha sorry yes.

I tried with a character and tried with an image

I assume my calls are just wrong.

OK

Here is what I ended up doing.

.dcb-ui-language-selector::before {
    content: url("https://path/to/image.jpg");
    position: relative;
    top: -10px;
}

I had to capture a screenshot of the globe and upload it to my Docebo pictures and used that URL.

ui-language-selector ui-button-dropdown ui-button-text button:before{
    content: '\f173';
}/*globe icon for lang selector on homepage*/

@lrodman I haven’t tested the theory but perhaps your icon didn’t work because you needed to be authenticated to the platform in order to access them and the log in screen is, of course, before that.

Here’s what I ended up with.

I tried using object-fit:contain to shrink down a 48x48 icon but failed.

.dcb-ui-language-selector::before {
    content: url("https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/signin-globe.png");/*'\f173';*/
	position: relative;
	top: 6px;
}/*globe icon for lang selector on homepage*/

Thanks @gstager !!

@lrodman - For what it is worth…

I noticed that the globe is out of place today. For some reason it does not want to work as it did the other day so I tried something new by bumping up a level.

Now… I have not played around with this to see if the navigation group class is used somewhere else in the platform - it certainly does not sound very precise. That said - if you adjust yours and it works - be sure to be on the lookout for other areas where a globe magically appears. 

.navigation-group::before {
    content: url("https://path/to/image.jpg");
    position: relative;
    width: 19px;
    height: 19px;
}

It changed for me today too! Thanks

doc-layout-external-header .doc-header-navigation .navigation-group::before {
    content: url("https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/signin-globe.png");/*'\f173';*/
    position: relative;
}/*globe icon for lang selector on homepage*/

possibly a little more specific and safer

gstager wrote:

Hmm… I don’t have the exact same login page as you so a little tougher to troubleshoot.

What I did, though was add an image before my sign in text LOL which worked fine but when I used your URL nothing appeared.

When trying your URL in a browser it tries to download rather than display.

Perhaps that is part of the issue.

 

I would really like to know how you added an image to the sign-in box! I have been trying for weeks to do this. Wondering if you could help me out?