@fortawesome/Angular-Fontawesome和Unicode

发布于 2025-02-07 20:31:12 字数 987 浏览 1 评论 0 原文

我早些时候在Angular应用程序中升级了字体Awessy

。 a href =“/cdn-cgi/l/email-potlection” class =“ __ cf_email__” data-cfemail =“ 6A0B040D1F060B18470C05041E0B1D0B1D0B1D0B1D0F1905070F19070F2A59444444445A4445A”

我们已经从 ＆lt; i class =“ fa fa-lock”＆gt;＆lt; i＆gt; to ＆lt; fa-icon icon =“ falock”＆gt;＆lt;/fa-icon＆gt;

现在，挑战性的内容是，在我的现有应用程序中，我们使用了 unicode 如下：

ui li:before {
content: '\f138';
font-family: FontAwesome;
}

我已将上述更改为下面，

ui li:before {
    content: '\f01';
    font-family: Font Awesome 5 Free;
    }

但图标没有出现，我们仍然需要定义.css文件在Angular.json为Unicode工作（Node_modules的Fort-tos-tose fort-of-of。

请注意，我的版本 fortawesome 支持 font-awone版本5+`。

添加了软件包

    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",

Angular version :6;

原文

I am upgrading font-awesome in my angular application earlier we were having hardcoded the URL of font-awesome (from CDN ) in style.scss file, now we got to have an angular package which is as below:

ng add @fortawesome/[email protected] and also similar SVG icons.

and we have changed the approach from
<i class="fa fa-lock"><i> to <fa-icon icon="faLock"></fa-icon>

Now the challenging stuff here is that in my existing application we have used unicode as below:

ui li:before {
content: '\f138';
font-family: FontAwesome;
}

I have changed the above to below

ui li:before {
    content: '\f01';
    font-family: Font Awesome 5 Free;
    }

but icons are not coming up, do we still need to define the .css file in angular.json to work for Unicode (the path of fort-awesome of node_modules )?

Please note that my version of fortawesomesupportsfont-awesome version 5+`.

ADDED packages

    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.0",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",

Angular version :6;

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半世晨晓 2025-02-14 20:31:12

好的，如果您检查使用新图标的代码，则应该看到类似的内容：

这意味着您没有CSS显示FA图标的方法：

.fa, .fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

因此您无法使用Unicode的技巧来显示图标。
除非在Angular SVG FA库之上，您可以安装“ Web”方式：
。然后，您将拥有一个常规的 font-family ，您将能够使用。

告诉我，如果我正确表达了有关SVG的零件是否对您有意义。
干杯。

Ok, if you inspect your code where you use you new icons, you should see something like that :

That means that you don't have the css way to display FA icons :

.fa, .fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900;
}

So you can't use the unicode trick to display an icon anymore.
Unless, on top of the angular svg FA library, you install the "web" way :
https://fontawesome.com/v5/docs/web/setup/get-started. You will then have a regular font-family that you will be able to use.

Tell me if the part about the SVG makes sense to you if I expressed it correctly.
Cheers.

回复收藏 0 原文

~没有更多了~