Language Switcher Icon change to Fontawesome

[LauraMauersberg]

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!

[DaniellePeters · Accepted solution]

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.

[LauraMauersberg]

This is amazing. Thank you so much!