时间戳

首页 > 解决方案 > 材质图标未在 Hyperhtml 中加载

css - 材质图标未在 Hyperhtml 中加载

问题描述

我在 Hyperhtml 组件中使用材质图标。但是即使加载了css，图标也不会加载到浏览器中。显示的是“3d_rotation”而不是图标。

这是我的实现。

    const appIframeRender = hyperHTML.bind(document.querySelector('#iframe_element').attachShadow({mode: 'open'}));
        const main2 = hyperHTML.wire();
    appIframeRender`${[
            cbplugin.CharmListComponent.render(main2)
          ]}`;

    cbplugin.WrapperComponent.render = function (render, data){
        return render`

  <style>
  @import "https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css";
  @import "https://fonts.googleapis.com/icon?family=Material+Icons";
  @import "https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700"; 

  </style>
  <div>
    <a class='dropdown-trigger card-more-actions' href='#' data-target='dropdown2'>
                <i class="material-icons">
                  3d_rotation
                  </i>
                </a>
  </div>
    }

所以我怀疑Hyper Html中是否可能不支持材质图标。材料图标 css 显示在检查元素样式中。

谢谢

标签： cssshadow-domhyperhtml

解决方案

无论何时使用 Shadow DOM，都必须在主文档中导入字体：

<html>
<head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700">
</head>
...

推荐阅读