[Resolved] set up a custom icon for language (world icon)

Hi,

Reference to our recent chat, I need to take a closer look at your site. So I request temporary access (WP-Admin and FTP), preferably to a test site where the problem has been replicated.

Your next answer will be private, to share this information safely.

Also provide detailed steps to reproduce the issue and links to pages in the admin and on the frontend.

IMPORTANT: Please take a complete backup of the site to avoid data loss. I may need to activate/deactivate plugins also.

See https://wpml.org/purchase/support-policy/privacy-and-security-when-providing-debug-information-for-support/ for details on privacy and security.

Regards.

Thank you for your patience and cooperation. The issues are fixed, please check your site as well as attached images.

Some points to be noted:

- Your had set "Default flag format" to SVG in WPML -> Languages, while image was PNG. So I corrected that and used your png globe image.
- The image is 150x150, while recommended is 18 x 12.
- If you want to use SVG image, you 'll need a different plugin to add SVG support. See https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-flags/#custom-flag-requirements for details.

- For the horizontal vs vertical language switcher in mobile, I've fixed the CSS by adding following in the Theme -> Customize -> Additional CSS:

.elementor-nav-menu li.wpml-ls-item {
    border-width: 0;
    display: inline-block;
    width: 36%;
    font-size: 10px;
}

.wpml-ls-item a.elementor-item {
    font-size: 12px!important;
}

- Same CSS fixes that language names looking like a line in the mobile menu. Because font-size was set to 1px.

Please feel free to adjust the CSS as per your likings. Also see following for more details on Customizing a Language Switcher with CSS:

- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/how-to-fix-styling-and-css-issues-for-the-language-switchers/#customizing-a-language-switcher-with-css
- https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/#the-styling-part

Thank you for your message, please consider following:

1) Because you're using a way too big image (1103px x 662px) while recommended size is 18px x 12px.

2) For the other language, please also use the same "Custom Flag" option in WPML -> Languages -> Edit Languages. I added that icon for English only to showcase. You can add it to the other language(s) as desired.

Please see the previously provided guides for more details.

Thank you for the updates.

WPML comes with very plain and default set of styles and allows themes and other plugins to override it. So apparently these issues are not related to WPML but the styling being applied in your site.

I'll request to use browser's inspector to observe the styles being applied to the certain (intended) parts, play with it to achieve your desired results and then apply those final styles (i.e. save) to the appropriate location (i.e. theme customizer's advanced CSS section, your own styles CSS or etc). Please see hidden link how you can use browser inspector in different browsers.

As long as the image quality is concerned, not every image looks great when it is resized. Some pixelate when upscaled while other look messy when downscaled. Generally, you should use a sharp image for such smaller sizes (i.e. no gradients or grey-scales).

For the icon, not displaying with Swedish language, perhaps either changes are not being applied, or caching is in play. You can force reload the page, clear browser and site caches and/or disable caching plugin while working at it.

You can also clear/disable language switcher cache in WPML -> Support -> Troubleshooting.

Additionally, you can also try on this sandbox site (hidden link one-click login). Here, I've configured WPML while you can activate Elementor and switch to Hello Elementor theme and reproduce the issues. You may also try with a default WP theme like 2021.