Question

我在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是否不支持Material Icon。材质Icon CSS在检查元素样式中显示。

谢谢

Answer 1

每当使用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>
...

材质图标未在Hyperhtml中加载

1 个答案: