admin管理员组

文章数量:1262081

I want to host Material Icons offline for my offline web development project (I will not have internet on the puter where is deployed). From my Google search, I found this SO answer. BUT it is Not working for me. My question is how to make it work. How to host material design icons offline for my offline project?

I have attached a .zip file of my SSCCE project, which reproduces the problem, here.

Basically I downloaded the MaterialIcons-Regular.eot, MaterialIcons-Regular.ttf, MaterialIcons-Regular.woff and MaterialIcons-Regular.woff2 from here and put them in my project's directory.

Here is my index file:

<!DOCTYPE html>

<html>

<head>
    <title>MaterializeTest</title>

    <link rel="stylesheet" href="material-fonts.css" />
    <link type="text/css" rel="stylesheet" href="materialize.min.css" />

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1"/>

    <script src="jquery.min.js"></script>
    <script src="materialize.min.js"></script>
</head>

<body>
    <a href="#!"><i class="material-icons">chevron_left</i></a>
</body>

</html>

And here is the CSS file. 

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

.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';
}

I want to host Material Icons offline for my offline web development project (I will not have internet on the puter where is deployed). From my Google search, I found this SO answer. BUT it is Not working for me. My question is how to make it work. How to host material design icons offline for my offline project?

I have attached a .zip file of my SSCCE project, which reproduces the problem, here.

Basically I downloaded the MaterialIcons-Regular.eot, MaterialIcons-Regular.ttf, MaterialIcons-Regular.woff and MaterialIcons-Regular.woff2 from here and put them in my project's directory.

Here is my index file:

<!DOCTYPE html>

<html>

<head>
    <title>MaterializeTest</title>

    <link rel="stylesheet" href="material-fonts.css" />
    <link type="text/css" rel="stylesheet" href="materialize.min.css" />

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1"/>

    <script src="jquery.min.js"></script>
    <script src="materialize.min.js"></script>
</head>

<body>
    <a href="#!"><i class="material-icons">chevron_left</i></a>
</body>

</html>

And here is the CSS file. 

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

.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';
}
  • javascript
  • css
  • material-design
  • materialize
  • google-fonts
Share Improve this question asked Oct 3, 2017 at 7:28 ShyShy 5361 gold badge8 silver badges24 bronze badges 6
  • 1 Have you read this instruction? – Vladislav Kievski Commented Oct 3, 2017 at 8:32
  • @VladislavKievski Yes, I have followed the 'Setup Method 2. Self hosting' section. You can download my example little project from here. I have also copied the code snippets above. – Shy Commented Oct 3, 2017 at 8:41
  • try to prepend file like this: url("./MaterialIcons-Regular.eot") and all other locations.. and see if it loads ok,, also try to add quotes – Kresimir Pendic Commented Oct 3, 2017 at 9:47
  • @KresimirPendic But ./ is prepended to exes. Isn't it? – Shy Commented Oct 3, 2017 at 9:51
  • 1 try to add mime type fix,, I added answer lower – Kresimir Pendic Commented Oct 3, 2017 at 9:53
 |  Show 1 more ment

3 Answers 3

Reset to default 5

First way to add icons will be following:

  1. Copy content of this file to you custom css file (for instance, material-fonts.css) https://fonts.googleapis./icon?family=Material+Icons

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic./s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

  1. Copy the link from src url and put it in browser. It will download file. You need to put it file in the same directory where you save first file(material-fonts.css).
  2. Update in material-fonts.css file src: url() as src: url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');

Second example: Looks like you download wrong files. You need to download this directory and put it into your folder, previous files have to removed.

Your materialFontTest.php should look like:

<!DOCTYPE html>

<html>

<head>
<title>MaterializeTest</title>

<link rel="stylesheet" href="material-icons.css" />

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<script src="jquery.min.js"></script>
<script src="materialize.min.js"></script>
</head>

<body>
<a href="#!"><i class="material-icons">chevron_left</i></a>
</body>

</html>

Original but light weight Material Icons

This light-weight repository (https://www.npmjs./package/material-design-icons-iconfont) is a fork of the original repository of ~60MB but this is very much light weight because unnecessary files were removed from that original repository.

How to install?

step 1:

// install via bower/npm
bower install material-design-icons-iconfont

npm install material-design-icons-iconfont

step 2:

// import or link
@import "~material-design-icons-iconfont/dist/material-design-icons.css";

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

How to use?

<i class='material-icons'>done</i> // remember to add class `material-icons`

more on https://material.io/tools/icons/?style=baseline

I think you downloaded wrong files from somewhere. This is the path that you have to download correct fonts from: https://github./google/material-design-icons/tree/master/iconfont or use the one in my GH repo that worked for you already.

Also you need to call only one css in your html (php) file, like this:

<link rel="stylesheet" href="material-fonts.css" />

hth, k

本文标签： javascriptHow to host Material Design icons offlineStack Overflow

版权声明：本文标题：javascript - How to host Material Design icons offline? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740893901a2303217.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。