Comments (15)
I tried the HTML on demo forum. Sadly, it is not fetching the icons. I don't know why
from material.
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/
from material.
@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
from material.
To test, I will remove setting robota as default font as well. Will see whether icons work after that.
from material.
@TurboProgramming Awesome! I hope that fixes this issue. :)
from material.
Are you planning to use web fonts for this ?
from material.
@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.
from material.
Try this
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
from material.
@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"?
from material.
Did you try my PR ?
Here is how you add icons
<i class="material-icons">face</i>
from material.
@meetdilip Yes, I already placed it to the same location on that screenshot.
from material.
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
from material.
@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
from material.
@meetdilip Can you edit your PR with the solution you came up? (!important skipping)
from material.
@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 :)
from material.
Related Issues (20)
- Animation for loading indicator HOT 1
- Notification dropdown issue HOT 7
- Settings area at user profile HOT 3
- Tooltips on hover for group badges (permissions page) HOT 1
- ExtensionListItem more button issue HOT 2
- MDL to MDC with ripple effects HOT 2
- Extension enabling & disabling by clicking on icon (+removal of the checkbox)
- Hover shadow effect only on desktop (no mobile) HOT 1
- Admin panel active tab icon bold issue HOT 3
- Extension icon fix issues HOT 2
- Beta 8 support
- Reply Icon missing HOT 2
- Not sure if this is the correct icon for the side menu HOT 5
- Design Suggestion: 3 dots do not need drop shadow on each post HOT 3
- Cosmetic - Discussion List/Comment list in a discussion HOT 3
- Profile image issue HOT 2
- Version number getting outside of the card HOT 4
- Inverse transition required for hovers HOT 3
- Remove sliders HOT 2
- Roadmap for 0.1.0-beta.12+
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material.