Fatal编程技术网
  • javascript/
  • Javascript 如何脱机托管材质设计图标？

Javascript 如何脱机托管材质设计图标？

javascript css

Javascript 如何脱机托管材质设计图标？,javascript,css,material-design,materialize,google-fonts,Javascript,Css,Material Design,Materialize,Google Fonts,我想为我的脱机web开发项目脱机托管材质图标（部署的计算机上没有internet）。从我的谷歌搜索中，我找到了。但这对我不起作用。我的问题是如何让它工作。如何为我的脱机项目脱机托管材质设计图标 我已附上 基本上我从这里下载了MaterialIcons-Regular.eot，MaterialIcons-Regular.ttf，MaterialIcons-Regular.woff和MaterialIcons-Regular.woff2，并将它们放在我的项目目录中 这是我的索引文件： <!DO

我想为我的脱机web开发项目脱机托管材质图标（部署的计算机上没有internet）。从我的谷歌搜索中，我找到了。但这对我不起作用。我的问题是如何让它工作。如何为我的脱机项目脱机托管材质设计图标

我已附上

基本上我从这里下载了
MaterialIcons-Regular.eot
，
MaterialIcons-Regular.ttf
，
MaterialIcons-Regular.woff
和
MaterialIcons-Regular.woff2
，并将它们放在我的项目目录中

这是我的索引文件：

<!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>
添加图标的第一种方法如下：

  • 将此文件的内容复制到自定义css文件（例如，material fonts.css）
    • /*回退*/
@字体{
字体系列：“材质图标”；
字体风格：普通；
字体大小：400；
src:url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)格式（'woff2'）；
}
.材质图标{
字体系列：“材质图标”；
字体大小：正常；
字体风格：普通；
字体大小：24px；
线高：1；
字母间距：正常；
文本转换：无；
显示：内联块；
空白：nowrap；
换字：正常；
方向：ltr；
-webkit字体功能设置：“liga”；
-webkit字体平滑：抗锯齿；

    }
    我想你从某处下载了错误的文件。这是您必须从下载正确字体的路径：或使用我的GH repo中已经为您工作的字体

    您还需要在html（php）文件中只调用一个css，如下所示：

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

    原创但重量轻的材质图标

    这个轻量级存储库（）是~60MB原始存储库的一个分支，但它非常轻量级，因为不必要的文件已从原始存储库中删除

    如何安装？ 步骤1： 步骤2： 
    //导入或链接
@导入“~material design icons icont/dist/material design icons.css”；
    如何使用？ 
    done//记住添加class`材质图标`
    有关

    的更多信息，你读过吗？@VladislavKievski是的，我遵循了“设置方法2”。“自托管”部分。您可以从下载我的示例小项目。我还复制了上面的代码片段。请尝试像这样预编文件：
    url（“./MaterialIcons Regular.eot”）
    和所有其他位置。。并查看是否加载了ok，，同时尝试添加quotes@KresimirPendic但是
    /
    前面加了
    exe
    s。不是吗？尝试添加mime类型修复，我添加了答案lowerI无法解释第二点。你能再检查一下吗。我认为有拼写错误。这是一个语法和语义都不清楚的句子。谢谢，现在好点了吗？请看我的示例项目（它演示了这个问题）。没有渲染材质图标。我添加了第二个解决方案。你能试试吗？我能在半小时内试试吗？全局文件，你是指
    /etc/apache2/sites enabled/000 default.conf
    文件吗？这取决于你所在的平台，我可以看到ubuntu的
    /etc/apache2/apache2.conf
    ，但我不确定，我使用的是nginxI，我使用的是ubuntu 16.04和apache2，我在
    /etc/apache2/apache2.conf
    的末尾添加了这些行，并重新启动了apache。但我还是有同样的问题。材料图标未呈现。您能否共享您的url（如果它不是私有或本地主机），以便我可以查看并尝试调查您的案例？您好@Sie您可以测试我发送给您的回购请求，，这是一个可用的公共html文件，您可以在此处查看： 
    <link rel="stylesheet" href="material-fonts.css" />

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

npm install material-design-icons-iconfont

    // 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">

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