Skip to content

Instantly share code, notes, and snippets.

@memetican
Last active December 16, 2023 05:37
Show Gist options
  • Save memetican/4f955d519d87de7c7fd38fb8296a5511 to your computer and use it in GitHub Desktop.
Save memetican/4f955d519d87de7c7fd38fb8296a5511 to your computer and use it in GitHub Desktop.
Locale Switcher
.locale-item[lang-iso-code=zh] .locale-flag {
background-image: url("data:image/svg+xml;base64,CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgaWQ9ImZsYWctaWNvbnMtY24iIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KICA8ZGVmcz4KICAgIDxwYXRoIGlkPSJjbi1hIiBmaWxsPSIjZmYwIiBkPSJNMS0uMy0uNy44IDAtMSAuNi44LTEtLjN6Ii8+CiAgPC9kZWZzPgogIDxwYXRoIGZpbGw9IiNlZTFjMjUiIGQ9Ik0wIDBoNTEydjUxMkgweiIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2NuLWEiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4IDEyOClzY2FsZSg3Ni44KSIvPgogIDx1c2UgeGxpbms6aHJlZj0iI2NuLWEiIHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMSAxNDIuNiAtNDcpc2NhbGUoMjUuNTgyNykiLz4KICA8dXNlIHhsaW5rOmhyZWY9IiNjbi1hIiB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKC05OC4xIDE5OCAtODIpc2NhbGUoMjUuNikiLz4KICA8dXNlIHhsaW5rOmhyZWY9IiNjbi1hIiB3aWR0aD0iMzAiIGhlaWdodD0iMjAiIHRyYW5zZm9ybT0icm90YXRlKC03NCAyNzIuNCAtMTE0KXNjYWxlKDI1LjYxMzcpIi8+CiAgPHVzZSB4bGluazpocmVmPSIjY24tYSIgd2lkdGg9IjMwIiBoZWlnaHQ9IjIwIiB0cmFuc2Zvcm09Im1hdHJpeCgxNiAtMTkuOTY4IDE5Ljk2OCAxNiAyNTYgMjMwLjQpIi8+Cjwvc3ZnPgo=");
}
<style>
@charset "UTF-8";
div.locale-flag {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.locale-item[lang-iso-code=en] .locale-flag {
background-image: url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@main/flags/1x1/gb.svg");
}
.locale-item[lang-iso-code=es] .locale-flag {
background-image: url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@main/flags/1x1/es.svg");
}
.locale-item[lang-iso-code=es] .locale-name::before {
content: "Español";
display: block;
}
.locale-item[lang-iso-code=zh] .locale-flag {
background-image: url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@main/flags/1x1/cn.svg");
}
.locale-item[lang-iso-code=zh] .locale-name::before {
content: "中文";
display: block;
}
</style>
<style>
div.locale-flag {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.locale-item[lang-iso-code=en] .locale-flag {
background-image: url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@main/flags/1x1/gb.svg");
}
.locale-item[lang-iso-code=es] .locale-flag {
background-image: url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@main/flags/1x1/es.svg");
}
.locale-item[lang-iso-code=zh] .locale-flag {
background-image: url("https://cdn.jsdelivr.net/gh/lipis/flag-icons@main/flags/1x1/cn.svg");
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment