我正在尝试使用 MaterializeCSS Icon 来处理导航栏。在发布的代码中,arrow-drop_down 似乎不起作用。相反,它只显示一个文本。图标呈现在除 app.component.html 文件之外的其他页面上。
我尝试直接在 index.html 文件中导入以下代码。结果还是一样。我在这里错过了什么吗?此外,我无法弄清楚图标显示在 app.component.html 之外的任何其他组件中的原因
任何帮助将不胜感激。谢谢。让我知道是否需要更多详细信息。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
索引.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UiCommunity</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<header>
<nav class="white">
<div class="container nav-wrapper">
<a href="/" class="brand-logo">Community</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a routerLink="/" routerLinkActive="active">HOME</a>
</li>
<li>
<a routerLink="/event" routerLinkActive="active">EVENTS</a>
</li>
<li *ngIf="!authenticated()">
<a routerLink="/login" routerLinkActive="active">LOGIN</a>
</li>
<li *ngIf=!authenticated()>
<a routerLink="/register" routerLinkActive="active">SIGNUP</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/logout" class="black-text">LOGOUT</a>
</li>
<li *ngIf=authenticated()>
<a routerLink="/profile" class="dropdown-trigger black-text" data-target="dropdown1">PROFILE<i class="material-icons right">arrow_drop_down</i></a>
</li>
<li>
<a class="btn waves-effect waves-lime lime darken-4 white-text">Donate</a>
</li>
</ul>
</div>
</nav>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">three</a></li>
<li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
<li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
</ul>
</header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
这是我的 style.css
/* You can add global styles to this file, and also import other style files */
@import "../node_modules/materialize-css/dist/css/materialize.css";
@import url('https://fonts.googleapis.com/css?family=Philosopher');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
最佳答案
你能尝试直接在你的应用组件 ts/js 文件上导入你的样式文件吗?如果您安装了所有依赖项并且它在其他页面上工作,则可能是导入或错误路径问题。
关于javascript - MaterializeCSS 图标不适用于 Angular 7 中的导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54610943/