CSS need help: trying to insert a globe icon before the word "English" on signin page (language selector menu)
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*/
Page 1 / 1
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*/
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*/
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.
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.
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*/