Question

Fontawesome图标在角度项目中无法正常工作。

所以我基本上对fontawesome图标有问题。如果使用标签，则默认情况下仅适用于导航栏中已存在的图标，我不知道如何添加自定义图标（例如信封）。因此，我在index.html中添加了fontawesome .css，并使用了很好的旧样式来插入图标。当我使用“ npm start”启动前端时，这很好用，但不打开localhost：9000，但是当我启动“ ./mvnw”并打开localhost：8080时，则不起作用。可能是什么问题呢？我基本上需要任何解决方案来使用我想要的任何免费fontawesome图标。

index.html->

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

app.module.ts->

import { AngularFontAwesomeModule } from 'angular-font-awesome';
imports: [AngularFontAwesomeModule]

navbar.component.html->

<i class="fa fa-envelope" aria-hidden="true"></i>

无错误消息。就像我从未添加.css文件一样，它根本没有显示。

Answer 1

要在JHipster项目中导入新图标，请在vendor.ts中添加图标。该库以这种方式配置为仅包括使用的图标，而不将未使用的图标打包在生产版本中。

忽略下面的代码中的.....，这意味着还有其他内容。缩短以适合答案。

import { library } from '@fortawesome/fontawesome-svg-core';
import {
  faUser,
  faSort,
  .....
  faEnvelope
} from '@fortawesome/free-solid-svg-icons';

// Adds the SVG icon to the library so you can use it in your page
library.add(faUser);
library.add(faSort);
....
library.add(faEnvelope);

然后，您可以使用普通字体超赞标签来包含信封图标：

<fa-icon [icon]="faEnvelope"></fa-icon>

Answer 2

我没有导入图标本身。这解决了问题：

navbar.component.ts->

import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
expored class NavbarComponent implements OnInit {
    faEnvelope = faEnvelope
}

navbar.component.html->

<fa-icon [icon]="faEnvelope"></fa-icon>

Fontawesome图标未显示在angular的“ ./mvnw”开头，但确实显示在“ npm start”上

2 个答案: