Question

我正在使用素材图标支持来开发Chrome扩展程序。我的main.css文件包含以下代码段：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v7/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    word-wrap: normal;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;

CSS包含在chrome扩展程序的索引页面中，我试图在导航栏中使用此库中的3个图标，如下所示：

<nav>
    <div class="nav-wrapper">
        <ul id="nav-mobile" class=" hide-on-med-and-down">
            <li><a href="#"><i class="material-icons left dp48">settings</i>Settings</a></li>
            <li><a href="#"><i class="material-icons left dp48">web</i>Our Page</a></li>
            <li><a href="#"><i class="material-icons left dp48">payment</i>Donate</a></li>
        </ul>
    </div>
</nav>

以经典方式打开此html页面时，图标会呈现，但在Chrome中导入解压缩的扩展程序时，图标不会呈现，也不会显示链接文本（设置，我们的页面，捐赠）。此外，在检查扩展弹出窗口时，开发控制台中不会发生错误。

我的猜测是这个问题是从远程位置加载这些图标/字体引起的。有没有办法让它们工作而不涉及下载资源？

实体化图标不会显示在Chrome扩展程序弹出窗口中

0 个答案: