Language Switcher

[#1]

Hi there,

I have found this nice post https://community.hubspot.com/t5/COS-Design-Support/Language-Switcher-Icon-change-to-Fontawesome/m-p... which is exactly what I am trying to implement. Actually I would be grateful if someone could help me either in changing the colour of the globe icon (#ff8300) or to change the icon itself.

I am not an expert ( as @Jsum well knows 🙂 ) and I cannot find the globe_class and relevant css.

[#2 · Accepted solution]

You need to override the class.

.globe_class {
    background-image:none;
}

.globe_class:before {
    content: "\[UNICODE]";
    font-family: FontAwesome;
    color: #ff8300;
}

 In the .globe_class:before selector you can change the "content: "\[UNICODE]";" to the unicode value of the font awesome icon you want such as "content: "\f042";"

[#3]

@Reg

that is very kind of you. I am so sorry but...where I can find the class? I am nor a designer neither an expert...really sorry but would appreciate any input...

[#4]

You would need to paste it into your stylesheet. Each website has a .css stylesheet that allows for the styling to occur. 

[#5]

@Reg yes, I know more or less on how to work on the css stylesheet but do you mean that I have to add your suggested code to my stylesheet?

[#6]

Yes exactly 🙂 but don't forget to replace the UNICODE with the icon you would like.

[#7]

By any chance could I kindly ask you where I should put that code? in my own stylesheet (template purchased at the HS MarketPlace) I cannot find any .globe_class...

[#8]

Yes you should put it into your stylesheet(from theme), the styles will override the ones included from default sheets.

[#9]

@Reg awesome! I did it and it works and now the globe icon is #ff8300. The very last thing: how can I make bigger the globe? I applied:

border-radius: 30px;
width: 30px;
height: 30px;

but I have the feeling that is wrong since the size of the globe icon does not change 🙂

[#10]

@Reg settled. Thank you so much