Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
And you can combine fonteawesome icon and text, and extent width of the icon:
html[lang="fr"] .fa-globe:before {
font-family : Font Awesome\ 5 Pro, Lato, Helvetica, Arial, sans-serif;
content: "\f57d" " FR";
font-weight: 700;
font-size: 0.875em;
}
html[lang="en"] .fa-globe:before {
font-family : Font Awesome\ 5 Pro, Lato, Helvetica, Arial, sans-serif;
content: "\f57d" " EN";
font-weight: 700;
font-size: 0.875em;
}
#language-selector.tb.mouseable.button {
min-width: 50px;
}Last edited by Nico3939 (2020-05-16 08:35:27)
Offline
Yes, I did something very similar the other day: https://lab.danielleu.com/blog/customiz … -selector/
Daniel Leu | Photography
DanielLeu.com
My digital playground (eg, Backlight tips&tricks): lab.DanielLeu.com
Offline
And you can reduce button size on little display like mobil, iPad etc....
html .fa-globe:before {
font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif;
font-weight: 700;
font-size: 0.875em;
}
html[lang="fr"] .fa-globe:before {
font-family : Font Awesome\ 5 Pro, Lato, Helvetica, Arial, sans-serif;
content: "\f57d" " FR";
font-weight: 700;
font-size: 0.875em;
}
html[lang="en"] .fa-globe:before {
font-family : Font Awesome\ 5 Pro, Lato, Helvetica, Arial, sans-serif;
content: "\f57d" " EN";
font-weight: 700;
font-size: 0.875em;
}
#language-selector.tb.mouseable.button {
min-width: 50px;
}
#language-selector ul {
width: 75px;
}
@media screen and ( max-width: 992px ) {
html[lang="fr"] .fa-globe:before {
font-family : Font Awesome\ 5 Pro, Lato, Helvetica, Arial, sans-serif;
content: "FR";
font-weight: 700;
font-size: 0.875em;
}
html[lang="en"] .fa-globe:before {
font-family : Font Awesome\ 5 Pro, Lato, Helvetica, Arial, sans-serif;
content: "EN";
font-weight: 700;
font-size: 0.875em;
}
#language-selector.tb.mouseable.button {
min-width: 36px;
}
#language-selector ul {
width: 75px;
}
}Offline