I want to add language switcher to the header with an icon

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic contains 4 replies, has 2 voices.

Last updated by Christopher Amirian 3 years, 9 months ago.

Assisted by: Christopher Amirian.

Author	Posts
September 8, 2021 at 2:41 am #9544075
hamzaa-8	Hi, I have a header that is separated into two parts, the left part and right part, as you can see here: hidden link what I want is to add the language switcher to the other part and I want to add an icon for it, it will be exactly like this: hidden link I didn't know how to do that as the second part of the header is not a menu so please help me to do that. best regards, Hamza Ajlouni
September 8, 2021 at 2:45 pm #9549319
Christopher Amirian WPML Supporter since 07/2020 Languages: English (English ) Timezone: Asia/Yerevan (GMT+04:00)	Hi there, If you want to add a language switcher in a custom location, please kindly follow this link: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations You can set the language switcher under the Custom Language Switcher section in WPML > Languages and it is better to use the shortcode [wpml_language_selector_widget] to add the switcher wherever you want in the second part of the header. To add a custom icon, please do the following: - Navigate to WPML>Languages>Site language - Click on the Edit languages link - Under the Flag column of your language, select Custom flag to upload your custom icon. Thank you.
September 8, 2021 at 3:46 pm #9549891
hamzaa-8	Hi, thanks for your help now I moved a step forward but now the header looks like this hidden link and I want it like this hidden link before when the switcher was on the menu I have these settings hidden link but now there is no setting so please help me to make it looks like I want best regards Hamza Ajlouni
September 8, 2021 at 4:03 pm #9549967
hamzaa-8	Hi, after trying with it, I have fixed part of it, now the only issue is the icon As you can see it looks like this now: hidden link what I want is to add an icon before it not an image(png) if you look at my website i used an icon like this: hidden link and I want to do the exact same thing but with a world icon, so at the end, it will look like this hidden link now you will say why I don't want to use an image, and the answer is that icon is smaller also when I hover on the icon it changes the color as the text does. please visit my website and take a look at it, the change that I want is removing the flag image and instead add an icon for both languages (the same icon will be for both languages) and this icon must be before the text. site url: hidden link best regards, Hamza Ajlouni
September 9, 2021 at 12:02 pm #9555639
Christopher Amirian WPML Supporter since 07/2020 Languages: English (English ) Timezone: Asia/Yerevan (GMT+04:00)	Hi there, WPML does not support having an icon for the languages. You can turn off the flag by disabling it from the language switcher options. After that you need to add a CSS code like this to your website: .wpml-ls-native::before { content: "\e71e"; font-family: 'Linearicons'; margin-right: 10px; } You used the Linearicons font and I do not know what is the correct content for that globe icon. You need to change "\e71e" in the code above to whatever code that the globe icon is. The "\e71e" number is used for the person icon that you used for the login menu. Please kindly consider that this is outside of our support scope as WPML does not support icons out of the box. Thank you for your understanding.