Html 如何在元素脱机之前将材质图标轮廓用于：：

我想知道，在本地下载到：：before或：：after元素时，是否可以使用材料字体的大纲类型？我得到的最接近的解释在这条线索中-

（您可以滚动到线程的下半部分，或者只需按crtl+f，然后在查找窗口中键入“outline”，它将使您到达那里-从第二个结果开始）

在这里，一个名叫威尔的家伙一步一步地解释了如何使用轮廓类型，而且它确实有效。我在HTML中添加了一个带有类材质图标轮廓的I标记，图标显示得非常完美。但是，当我尝试对：：before元素执行相同操作时，什么也不显示。如果任何人有一个想法，这可以考虑如何工作，一个帮助将不胜感激。这是我的HTML和CSS

        <div class="connected-house-links">
            <ul>
                <li class="material-icons">Енергетска Ефикасност</li>
                <li class="material-icons">Безбедност и Сигурност</li>
                <li class="material-icons-outline">Комфорт</li>
                <li class="material-icons">Заштита на најмилите</li>
            </ul>
        </div>

---

对任何感兴趣的人来说，我已经弄明白了。为了实现这一点，您只需不将类“Material Icons Outline”交给父元素即可。对于任何感兴趣的人，我已经找到了答案。要实现这一点，只需不将类“材质图标大纲”赋予父元素即可。

//setting up to use both type of icons

@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');
}

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

.material-icons-outline {
  font-family: 'Material Icons Outline';
}

.material-icons {
  font-family: 'Material Icons';
}

.material-icons-outlined,
.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';
}



//using the desired fonts in css

.connected-house-links ul .material-icons:first-child::before {
    content: '\e1a3';
    font-weight: 100;
    transform: scale(2);
    position: absolute;
    left: -2em;
    bottom: -0.2em
}

.connected-house-links ul .material-icons:nth-child(2)::before {
    content: '\e8e8';
    transform: scale(2);
    position: absolute;
    left: -2em;
    bottom: -0.2em
}

.connected-house-links ul .material-icons:nth-child(3)::before {
    font-family: 'Material Icons Outline';
    content: '\e88a';
    transform: scale(2.3);
    position: absolute;
    left: -2em;
    bottom: -0.1em
}

.connected-house-links ul li:last-child::before {
    font-family: 'connected-home-icons';
    content: '\e900';
    transform: scale(1.7);
    position: absolute;
    left: -2em;
    bottom: -0.1em
}