如何离线托管材料图标? [英] How to host material icons offline?
问题描述
我很抱歉,如果这是一个非常简单的问题,但是如何在没有
< link的情况下使用Google材质图标href =https://fonts.googleapis.com/icon?family=Material+Icons =stylesheet>
?
我想要我的应用即使用户没有互联网连接也能显示图标
解决方案下载和将包含材质设计图标文件的iconfont文件夹复制到本地项目中 - https://github.com/google/material-design-icons/tree/master/iconfont
- 替换将@ font-face的url属性与本地项目文件夹路径(字体文件所在的位置)联系起来,例如。 url(iconfont / MaterialIcons-Regular.ttf)
$ b
@ font-face {
font-family:'Material Icons';
font-style:normal;
font-weight:400;
src:url(iconfont / MaterialIcons-Regular.eot); / *对于IE6-8 * /
src:local('Material Icons'),
local('MaterialIcons-Regular'),
url(iconfont / MaterialIcons-Regular.woff2)格式('woff2'),
url(iconfont / MaterialIcons-Regular.woff)格式('woff'),
url(iconfont / MaterialIcons-Regular.ttf)格式('truetype');
}
.material-icons {
font-family:'Material Icons';
font-weight:normal;
font-style:normal;
font-size:24px; / *首选图标大小* /
display:inline-block;
line-height:1;
text-transform:none;
letter-spacing:normal;
word-wrap:正常;
white-space:nowrap;
方向:ltr;
/ *支持所有WebKit浏览器。 * /
-webkit-font-smoothing:antialiased;
/ *支持Safari和Chrome。 * /
text-rendering:optimizeLegibility;
/ *支持Firefox。 * /
-moz-osx-font-smoothing:灰度;
/ *支持IE。 * /
font-feature-settings:'liga';
$ / code>
< i class =material-icons> face< / i>
NPM / Bower软件包
谷歌正式拥有Bower和NPM依赖项选项 - 遵循材料图标指南 1
使用bower
bower install material-design-icons --save
使用NPM
npm install material-design-icons --save
1 http://google.github.io/material -design-icons /
My apologies if this is a very simple question, but how do you use google material icons without a
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
?
I would like my app to be able to display the icons even when the user does not have an internet connection
解决方案Method 2. Self hosting 1
Download and copy the iconfont folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/tree/master/iconfont
- Replace the source in the url attribute of @font-face with your local project folder path (where the font files are located) eg. url( "iconfont/MaterialIcons-Regular.ttf")
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(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'; }
<i class="material-icons">face</i>
NPM / Bower Packages
Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1
Using bower
bower install material-design-icons --save
Using NPM
npm install material-design-icons --save
1 http://google.github.io/material-design-icons/
这篇关于如何离线托管材料图标?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!