英文:
drag_indicator is not included with the regular icons in material design
问题
drag_indicator 在 Material Design 中的常规图标中没有包含。我应该如何手动添加它呢？
根据这个指南，我使用以下 CSS 来添加图标：
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('@{fontPath}/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url('@{fontPath}/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), url('@{fontPath}/MaterialIcons-Regular.woff2') format('woff2'), url('@{fontPath}/MaterialIcons-Regular.woff') format('woff'), url('@{fontPath}/MaterialIcons-Regular.ttf') format('truetype'), url('@{fontPath}/MaterialIcons-Regular.svg') format('svg');
}
.grey-color {
color: @grey-color;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-variant: 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;
text-rendering: optimizeLegibility;
/* 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';
}
现在，我能够使用代码嵌入一些图标。例如，以下标记片段按预期工作（显示 move_vert 图标）：
<span class="material-icons">

</span>
而以下片段不起作用：
<span class="material-icons">

</span>
似乎我不是唯一遇到此问题的人。这里有一个类似的帖子。但不清楚帖子得出了什么结论。因此，这个问题仍然值得在这里发布。
英文:
drag_indicator is not included with the regular icons in material design. Should I somehow add it manually?
Following this guide I added the icons with the help of the following css:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("@{fontPath}/MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url("@{fontPath}/MaterialIcons-Regular.eot?#iefix")format("embedded-opentype"), url("@{fontPath}/MaterialIcons-Regular.woff2") format('woff2'), url("@{fontPath}/MaterialIcons-Regular.woff") format('woff'), url("@{fontPath}/MaterialIcons-Regular.ttf") format('truetype'), url("@{fontPath}/MaterialIcons-Regular.svg") format('svg');
}
.grey-color {
color: @grey-color;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-variant: 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;
text-rendering: optimizeLegibility;
/* 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';
}
Now I am able to use codes to embed some icons. E.g. the following markup piece works as expected (displays the move_vert icon):
<span class="material-icons">
&#xe5d4;
</span>
While the following piece do not work:
<span class="material-icons">
&#xf58e;
</span>
It seems that I am not the only one experiencing the issue. Here is a similar thread. But it is not clear to what conclusion the thread led. So, the question is still relevant for being posted here.
答案1
得分: 2
包含在内，可能的问题是您的 Material icons 库是本地下载的（自托管网页字体），并且比较旧。
如果您通过 Google 托管的字体使用字体，就不会出现问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title>Example</title>
</head>
<body>
<i class="material-icons">drag_indicator</i>
</body>
</html>
尝试重新下载字体，如果没有帮助，您还可以从与 Google 网页托管提供的相同来源下载 WOFF2 文件：WOFF2
它包含在此链接中：https://fonts.googleapis.com/icon?family=Material+Icons
英文:
It is included, maybe the problem is that your Material icons lib is downloaded locally (self-host web font) and it is old.
If you use fonts via Google-hosted Fonts, no problems occur.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title>Example</title>
</head>
<body>
<i class="material-icons">drag_indicator</i>
</body>
</html>
<!-- end snippet -->
Try to re-download Fonts, if it didn't help, you can also download WOFF2 file from the same source that google web hosting provides: WOFF2
Which included in this link: https://fonts.googleapis.com/icon?family=Material+Icons
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论