将CSS伪元素与Angular字体一起使用真棒问题

时间:2019-04-30 01:42:26

标签: angular font-awesome-5 angular-fontawesome

我已经从这里https://www.npmjs.com/package/@fortawesome/angular-fontawesome安装了@ fortawesome / angular-fontawesome到我的Angular 7应用程序中。

我可以使用图标使用,但是找不到通过CSS添加图标的方法。

我正在尝试添加ico CSS伪元素,如下所示:

.test:before {
    font-family: "Font Awesome 5 Free";
    content: "\f75b";
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
    font-weight: 900;
 }

这不起作用。我所看到的只是一个空的正方形。有人知道如何通过CSS伪元素使用图标吗?

2 个答案:

答案 0 :(得分:0)

我没有找到一种使用angular-font-awesome包的方法来将其与CSS或.scss中的伪元素一起使用。

我发现的唯一方法是: [将下面的代码粘贴到styles.css或styles.scss文件的顶部]

@font-face {
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0");
    src: url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg");}

我知道我会再次导入很棒的字体,但是我希望这种不切实际的方法能为您提供帮助。

答案 1 :(得分:-2)

使用font-family:“ FontAwesome”;