随着Web应用的发展，前端开发越来越受到重视。好的前端设计可以大大提升用户体验，并且为客户带来更高的回头率。在前端设计工作中，图标的使用无疑也是重要的一环。
FontAwesome是目前最受欢迎的图标集之一，它包含了几乎所有的常用图标，而且它直接提供了在HTML和CSS中使用所需要的素材。
在这篇文章中，我们将介绍如何使用npm包 @fortawesome/fontawesome-svg-core，以及如何在您的Web应用中使用FontAwesome图标。
安装@fortawesome/fontawesome-svg-core
要使用FontAwesome图标集，我们需要安装 @fortawesome/fontawesome-svg-core npm包。在安装之前，请确保已经安装了Node.js和npm。您可以通过以下命令在您的项目中安装 @fortawesome/fontawesome-svg-core 包：
npm install --save @fortawesome/fontawesome-svg-core
使用FontAwesome图标集
安装完成后，您需要将FontAwesome图标集的CSS样式表以及可使用的图标导入到您的网站中。
为此，我们可以使用以下两个功能来拉取所需的CSS和图标：
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
library.add(fas);这里我们使用了library.add功能，并向其中添加了@fortawesome/free-solid-svg-icons中的所有图标。如果你要添加FA Regular或FA Brands，请使用@fortawesome/free-regular-svg-icons和@fortawesome/free-brands-svg-icons代替@fortawesome/free-solid-svg-icons。
一旦您已将FontAwesome的图标集添加到图标库中，您就可以享受它的美妙了！像下面这样的HTML代码将展示FontAwesomeIcon图标，代码中使用的是图标的“垃圾桶”版本。
-- -------------------- ---- -------
--------- -----
------
------
------ ---------------- -------------------------------------------------------------- ----------------------------------------------------------------------------------- ------------------------
-------
------
-- ---------- --------------
-------
-------示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ------------------------------------
------ - --- - ---- ------------------------------------
------ - --- - ---- -------------------------------------
------ - --------------- - ---- ---------------------------------
---------------- -----
----- ----------- - -- -- -
------ -
--
--- ----- ---- ---
---------------- ------------- ------------------
--- ----- ---- ---
---------------- ------------- -----------
---
--
--
------ ------- ------------总结
如上所述，通过使用 FontAwesome 图标集，我们可以轻松使用图标，并在Web应用中大大提高视觉效果和用户体验。在本文中，我们已经学习了如何使用npm包@fortawesome/fontawesome-svg-core，以及使用React组件库中的FontAwesomeIcon组件来轻松使用FontAwesome图标集。希望这篇文章对大家有所帮助，感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fortawesome-fontawesome-svg-core