CMS Development

Giuseppe
Colaborador

Language Switcher

resolver

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 Soluciones aceptada
Reg
Solución
Colaborador | Partner nivel Elite
Colaborador | Partner nivel Elite

Language Switcher

resolver

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

Ver la solución en mensaje original publicado

0 Me gusta
9 Respuestas 9
Reg
Solución
Colaborador | Partner nivel Elite
Colaborador | Partner nivel Elite

Language Switcher

resolver

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 Me gusta
Giuseppe
Colaborador

Language Switcher

resolver

@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 Me gusta
Reg
Colaborador | Partner nivel Elite
Colaborador | Partner nivel Elite

Language Switcher

resolver

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 Me gusta
Giuseppe
Colaborador

Language Switcher

resolver

@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 Me gusta
Reg
Colaborador | Partner nivel Elite
Colaborador | Partner nivel Elite

Language Switcher

resolver

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

Reg Desgroseilliers
www.rdcoding.com
0 Me gusta
Giuseppe
Colaborador

Language Switcher

resolver

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 Me gusta
Reg
Colaborador | Partner nivel Elite
Colaborador | Partner nivel Elite

Language Switcher

resolver

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
Colaborador

Language Switcher

resolver

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

Language Switcher

resolver

@Reg settled. Thank you so much

0 Me gusta