CMS Development

Giuseppe
Contributor

Language Switcher

SOLVE

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
Reg
Solution
Contributor | Elite Partner
Contributor | Elite Partner

Language Switcher

SOLVE

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

Reg Desgroseilliers
www.rdcoding.com

View solution in original post

0 Upvotes
9 Replies 9
Reg
Solution
Contributor | Elite Partner
Contributor | Elite Partner

Language Switcher

SOLVE

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

Reg Desgroseilliers
www.rdcoding.com
0 Upvotes
Giuseppe
Contributor

Language Switcher

SOLVE

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

0 Upvotes
Reg
Contributor | Elite Partner
Contributor | Elite Partner

Language Switcher

SOLVE

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

Reg Desgroseilliers
www.rdcoding.com
0 Upvotes
Giuseppe
Contributor

Language Switcher

SOLVE

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

0 Upvotes
Reg
Contributor | Elite Partner
Contributor | Elite Partner

Language Switcher

SOLVE

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

Reg Desgroseilliers
www.rdcoding.com
0 Upvotes
Giuseppe
Contributor

Language Switcher

SOLVE

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

0 Upvotes
Reg
Contributor | Elite Partner
Contributor | Elite Partner

Language Switcher

SOLVE

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

Reg Desgroseilliers
www.rdcoding.com
Giuseppe
Contributor

Language Switcher

SOLVE

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

Giuseppe
Contributor

Language Switcher

SOLVE

@Reg settled. Thank you so much

0 Upvotes