CMS Development

Giuseppe
投稿者

Language Switcher

解決

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件の承認済みベストアンサー
Reg
解決策
投稿者 | Elite Partner
投稿者 | Elite Partner

Language Switcher

解決

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 いいね!
9件の返信
Reg
解決策
投稿者 | Elite Partner
投稿者 | Elite Partner

Language Switcher

解決

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 いいね!
Giuseppe
投稿者

Language Switcher

解決

@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 いいね!
Reg
投稿者 | Elite Partner
投稿者 | Elite Partner

Language Switcher

解決

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 いいね!
Giuseppe
投稿者

Language Switcher

解決

@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 いいね!
Reg
投稿者 | Elite Partner
投稿者 | Elite Partner

Language Switcher

解決

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

Reg Desgroseilliers
www.rdcoding.com
0 いいね!
Giuseppe
投稿者

Language Switcher

解決

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 いいね!
Reg
投稿者 | Elite Partner
投稿者 | Elite Partner

Language Switcher

解決

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
投稿者

Language Switcher

解決

@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
投稿者

Language Switcher

解決

@Reg settled. Thank you so much

0 いいね!