材料图标在模板(Web组件)中似乎不起作用

问题描述 投票:0回答:1

我正在尝试在页面(LINK)中使用Web的材料组件。

能够使用MDC创建FAB,您可以在这里找到它们[CODE-PEN] [2]

但是当我尝试在模板和自定义元素(Web组件)中执行相同操作时,它似乎无法正常工作LINK

我为FAB获得了正确的CSS,但未显示该图标。有人可以帮我吗?

[MDC LINK 1https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab

WORKING [2]:https://codepen.io/rleo2joseph/pen/GRRZGRv

NOT WORKING [3]:https://codepen.io/rleo2joseph/pen/KKKzeqY?editors=1010

javascript html web-component custom-element mdc-components
1个回答
0
投票

似乎您的(css)导入顺序不正确...我已经尝试过:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

而且效果很好...(也许material-components-web覆盖了一些实质性的图标定义)

无论如何,我确实希望您将组件内的css链接仅用于演示目的,并且您的原始代码在页面的顶部声明了这些链接(或其他任何css引导程序)]

© www.soinside.com 2019 - 2024. All rights reserved.