css - 通过npm下载的字体图标如何使用？

问题描述

问 题

想在项目中使用谷歌的material design图标：https://google.github.io/mate...

为了方便以后升级什么的，我希望通过npm进行管理，但是由npm下载下来之后，在页面中不知道怎么使用。我项目里用的是vue组件开发。

在入口文件引入了css如下：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('material-design-icons'), local('MaterialIcons-Regular');
}

.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 md-48">face</i>

结果无效

按照官方提供的例子应该是这样的：

请问应该如何正确引用……

解决方案

import 'material-design-icons/iconfont/material-icons.css';

这篇关于css - 通过npm下载的字体图标如何使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！