[英]How to use material fonts and icons locally with material-ui?
我在运行material-ui应用程序时无法访问Internet,因此我想在本地安装Material Design图标和字体。 我一直无法这样做。 例如,我试图通过以下方式使用图标:
在我的应用程序中导入main.css(我正在使用webpack)
但是, FontIcon组件不显示图标。
在我的main.css中我有:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
url(material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
url(material-design-icons/iconfont/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';
}
在index.js我有:
import "./assets/styles/main.css";
根据css-loader
的文档 :
@import和url(...)被解释为require(),并将由css-loader解析。
所以,如果你使用的是css-loader,这应该是“开箱即用”的。 确保您的CSS加载器看起来有点像:
{ test: /\.css$/, loader: "style-loader!css-loader" }
由于您使用的是webpack,因此您可以查看webpack文件加载器 。 您需要将它包含在webpack配置中的module
对象的loaders
数组中。
如果没有,请安装文件加载器:
npm install file-loader --save-dev
和一个样本加载器:
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=material-design-icons/iconfont/[name].[ext]'
}
您可能需要使用name
属性和CSS中包含字体的路径。 上面加载器中的name目录是文件加载器转储文件的位置(如果已经定义了文件,通常是outpath.path
中的webpack.config.js
)。 运行webpack,看看它给你带来了什么。
您还可以将字体文件嵌入为base-64编码的数据uri blob。 为此,请安装url-loader
并使用类似以下的加载器。 这次你需要指定一个mime类型,所以每个文件都需要它自己的加载器和它各自的mime类型
{ test: /\.svg$/, loader: 'url?limit=65000&mimetype=image/svg+xml&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff$/, loader: 'url?limit=65536&mimetype=application/font-woff&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.woff2$/, loader: 'url?limit=65536&mimetype=application/font-woff2&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.[ot]tf$/, loader: 'url?limit=65536&mimetype=application/octet-stream&name=material-design-icons/iconfont/[name].[ext]' },
{ test: /\.eot$/, loader: 'url?limit=65536&mimetype=application/vnd.ms-fontobject&name=material-design-icons/iconfont/[name].[ext]' }
但请注意,我为每个文件设置了64K的限制,因为浏览器对数据的支持 - uri blob超过64K并不是那么好,尽管您可以删除它。
我个人建议尝试使用文件加载器方法。
您应该能够在CSS中require
您的文件。 将其与上面的文件加载器结合使用。 require返回资源的路径,因此可以在CSS属性的值内部要求。 最终看起来像这样:
@font-face {
/* .... */
url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff2')) format('woff2'),
url(require('material-design-icons/iconfont/MaterialIcons-Regular.woff')) format('woff'),
url(require('material-design-icons/iconfont/MaterialIcons-Regular.ttf')) format('truetype');
/* .... */
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.