Best Answer

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


Userlevel 7
Badge +5

code not working

tried image and character code

character code would be better

 

ui-language-selector ui-button-dropdown ui-button-text button:before{
content: url('https://docebo-institute.s3.us-east-2.amazonaws.com/public/branding_hacks/signin-globe.svg'); /*'\f173';*/
}/*globe icon for lang selector on homepage*/

 

icon

Best answer by gstager 19 August 2022, 17:34

View original

12 replies

Userlevel 7
Badge +5

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.

 

Userlevel 7
Badge +5
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?

Userlevel 7
Badge +5
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?

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.

 

Userlevel 7
Badge +5

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

Picture is worth a thousand words…

This is where you are now..?

 

Userlevel 7
Badge +5

Ha sorry yes.

I tried with a character and tried with an image

I assume my calls are just wrong.

Userlevel 7
Badge +5

Here is where I am at currently with this.

Just playing with the alignment now.

Userlevel 7
Badge +5

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.

Userlevel 7
Badge +5
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?

 

@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.

Userlevel 7
Badge +5

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 !!

Userlevel 7
Badge +5

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

 

Userlevel 7
Badge +5

It changed for me today too! Thanks

Userlevel 7
Badge +5

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

Reply