We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Nov 3, 2017 10:16 AM
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.
Solved! Go to Solution.
Nov 3, 2017 10:23 AM
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";"
Nov 3, 2017 10:23 AM
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";"
Nov 3, 2017 10:48 AM
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...
Nov 3, 2017 10:54 AM
You would need to paste it into your stylesheet. Each website has a .css stylesheet that allows for the styling to occur.
Nov 3, 2017 10:56 AM
@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?
Nov 3, 2017 11:01 AM
Yes exactly 🙂 but don't forget to replace the UNICODE with the icon you would like.
Nov 3, 2017 11:05 AM
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...
Nov 3, 2017 11:09 AM
Yes you should put it into your stylesheet(from theme), the styles will override the ones included from default sheets.
Nov 3, 2017 11:38 AM
@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 🙂
Nov 3, 2017 12:20 PM
@Reg settled. Thank you so much