Hola! ¡Tenemos nuestra Comunidad en Español!

Language Switcher

SOLVE
Highlighted
Regular Contributor

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.

 

1 Accepted solution

Accepted Solutions
Reg Regular Contributor | Diamond Partner
Regular Contributor | Diamond Partner

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";"

Reply
0 Upvotes
9 Replies
Reg Regular Contributor | Diamond Partner
Regular Contributor | Diamond Partner

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";"

Reply
0 Upvotes
Regular Contributor

@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...

Reply
0 Upvotes
Reg Regular Contributor | Diamond Partner
Regular Contributor | Diamond Partner

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

Reply
0 Upvotes
Regular Contributor

@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?

Reply
0 Upvotes
Reg Regular Contributor | Diamond Partner
Regular Contributor | Diamond Partner

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

Reply
0 Upvotes
Regular Contributor

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...

Reply
0 Upvotes
Reg Regular Contributor | Diamond Partner
Regular Contributor | Diamond Partner

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

Regular Contributor

@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 :-)

Regular Contributor

@Reg settled. Thank you so much

Reply
0 Upvotes