XF 2.2 Material Icons

[Brandon K]

Can anyone help me out. I'm trying to get these material icons: https://pictogrammers.github.io/@mdi/font/1.8.36/

to work as icons on headers and the footer and the sidebar using :before .css like:

.block-minorHeader:before {
    font-family: "Material Design Icons";
    content: '\f20c';
}

But I can't seem to figure out what I'm doing wrong. I found in one thread here that said I needed to put:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

in the page container template, but I still can't seem to get the material icons to show.

Any help would be appreciated.

 

[Nicolas FR]

.block-minorHeader:before {
    font-family: "Material Icons";
    content: '\f20c';
}

?

 

[Brandon K]

.block-minorHeader:before {
    font-family: "Material Icons";
    content: '\f20c';
}

?

It should look the Facebook icon on this footer widget:

body .block[data-widget-key="thuix_footer_facebookWidget"] .block-minorHeader:before {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    content: "\f09a";
    display: inline-block;
    font: normal normal normal 18px/1 "Material Design Icons";
    font-size: inherit;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    width: auto !important;
    content: 'facebook';
    content: '\f20c';
}

Is the code on the style that has the material icons working.

I've tried this code as well and it doesn't work.

 

[Gemma]

I think their unicodes have changed, you would need to use F020C for the Facebook icon

Material Design Icons

pictogrammers.github.io

 

[Brandon K]

I think their unicodes have changed, you would need to use F020C for the Facebook icon

Material Design Icons

pictogrammers.github.io

Unfortunately, these new codes still aren't working for me. Do you know what the exact css I should be using?

And if I need to do anything else to get XenForo to recognize the Unicode?

 

[Brandon K]

I finally figured this out. Here's what you want to do for anyone else looking for the answer:

Add to PAGE_CONTAINER (or better helper_js_global):

<link rel="stylesheet" href="//cdn.materialdesignicons.com/4.4.95/css/materialdesignicons.min.css">

Do not use <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

Add to EXTRA.less

.p-navgroup-link.p-navgroup-link--conversations i:after {
font: 'Material Icons';
content: '\f1ee';
}

Changing the code to whichever 4 digit code you need from the above min.css stylesheet. Do not use the newer codes from github.

And of course changing the line before the {} to wherever you're applying the material icons.