Replace Font Awesome with Material icons about material

[meetdilip]

I tried the HTML on demo forum. Sadly, it is not fetching the icons. I don't know why

[meetdilip]

We can try self-hosting and them edit Flarum files where it uses fa icons

Setup Method 2. Self hosting

For those looking to self host the web font, some additional setup is necessary. Host the icon font in a location, for example https://example.com/material-icons.woff and add the following CSS rule:

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. /
-webkit-font-smoothing: antialiased;
/ Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}

Using the icons in HTML

It’s easy to incorporate icons into your web page. Here’s a small example:

Read here : http://google.github.io/material-design-icons/

[meetdilip]

@TurboProgramming I guess I found the issue.

Try skipping !important from the CSS file. That overwrites all the font options and defaults to the one defined

[meetdilip]

To test, I will remove setting robota as default font as well. Will see whether icons work after that.

[meetdilip]

@TurboProgramming Awesome! I hope that fixes this issue. :)

[meetdilip]

Are you planning to use web fonts for this ?

[ardacebi]

@meetdilip The only way of having this looks like to use a web font. Below is the code a user needs to insert to their custom header are on their forum to get the font:

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

But we don't know how to use these on the CSS style.

[meetdilip]

Try this

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

[ardacebi]

@meetdilip Adding that caused the admin panel to look like this:

The forum was working though, interesting 🤔

---

I don't know what's the issue about that, but I know this should work. And even after inserting this, what should I do to "replace the icons"?

[meetdilip]

Did you try my PR ?

Here is how you add icons

<i class="material-icons">face</i>

[ardacebi]

@meetdilip Yes, I already placed it to the same location on that screenshot.

[meetdilip]

Normally, custom.css should overwrite the default CSS. In that case, let's just use the same ID and overwrite the default CSS with material icon code

Can you please keep the import css code for some time. Maybe remove the header one for material, so that I can try different things on the demo forum @TurboProgramming

[ardacebi]

@meetdilip Yes, it should. But the PR you opened just has the include line which only makes Flarum load that. We need to get that and replace it with the fa icons.

Example to this: I’m making Flarum to load the Roboto font:
https://github.com/Extum/flarum-theme-material/blob/4e7921b802e54a27a5768715851d9e30399eef38/material.css#L22

Then defining the font with the name dfont:
https://github.com/Extum/flarum-theme-material/blob/4e7921b802e54a27a5768715851d9e30399eef38/material.css#L25

Then, replacing the regular font with Roboto (dfont):
https://github.com/Extum/flarum-theme-material/blob/4e7921b802e54a27a5768715851d9e30399eef38/material.css#L39

[ardacebi]

@meetdilip Can you edit your PR with the solution you came up? (!important skipping)

[ardacebi]

@meetdilip Hey! I did it:

---

I inserted the code piece below to my custom header section, and then modified the html of the icon using the inspector.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

Then I replaced <i class="icon fa fa-comments-o Button-icon"></i> with face to place the icon.

I may also have a solution to change all the icons using just CSS, it will need a lot of lines of code but it will be worth it :)