XF 2.2 Material Icons

Brandon K

Active member
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:

Code:
.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.
 

Brandon K

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

?
It should look the Facebook icon on this footer widget:

dcc29350d9c9e54b567c66841c13a41ec2bd7656.png



Code:
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.
 

Brandon K

Active member
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):
HTML:
<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
CSS:
.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.
 
Top