- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Language Switcher Icon change to Fontawesome
SOLVEApr 5, 2017 5:01 AM
Hi!
We are currently discovering all sorts of amazing hubspot modules and one of them is the language Switcher. I love it but not the icon.
Could anyone tell me how I can change it either to a font awesome icon, or how to change the "globe" to a " EN/DE" style? (English/German (Deutsch).
Thank you!! 🙂 I am quite new to this so bear with me if it was something obvious such as editing a stylesheet.
cheers!
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
Apr 5, 2017 2:36 PM
The language switcher icon has the class "globe_class" and the icon is being applied as a background image on that class. This comes from an external stylesheet that is applied to the page when the Language Switcher module is present.
Full CSS:
.globe_class { background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png); background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; width: 20px; height: 20px; cursor: pointer; }
You can override this by targeting that class in your own stylesheet and then adding the Unicode for the Font Awesome icon to the :before pseudoelement (assuming you already have Font Awesome installed)
This would look something like this:
.globe_class { background-image:none; } .globe_class:before { content: "\[UNICODE]"; font-family: FontAwesome; }
Alternatively, you could replace the background image with a different one using that same method of overriding the background image set on that class.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content