Font Awesome 握手图标不起作用

Question

我曾尝试使用握手图标，但它不起作用，下面包括我尝试过的代码：

<i class="fa fa-handshake-o"></i>

请帮助我

Answer 1

在 w3 school tryit 编辑器中尝试你的代码

这是链接https://www.w3schools.com/icons/fontawesome_icons_intro.asp

我认为您没有包含 font-awesome 的 css，因此包含“font-awesome.min.css”

这是来自尝试编辑器的示例屏幕

Answer 2

您需要添加 CSS 文件和字体文件才能使其工作。这是文档：http://fontawesome.io/get-started/

Answer 3

我在添加握手图标时遇到了同样的问题

 <span class="fa-stack">
     <i class="fa fa-circle fa-stack-2x"></i>
     <i class="fa fa-handshake-o fa-stack-1x fa-inverse"></i>
 </span>

第一次，它没有显示出来，但是在将 font-awesome fonts 和 css 更新到版本 4.7 后，它工作正常。尝试将您本地版本的 font-awesome fonts 和 css 更新为最新版本。

Answer 4

这是一个与 React 中的 FontAwesome 6+ 配合使用的解决方案，可以轻松组合图标包，例如免费图标包和专业图标包：

1. 将 FontAwesome 依赖项添加到您的项目中：

   npm install --save \
     @fortawesome/fontawesome-svg-core \
     @fortawesome/free-brands-svg-icons \
     @fortawesome/free-regular-svg-icons \
     @fortawesome/free-solid-svg-icons \
     @fortawesome/react-fontawesome
   

2. 声明您想要在应用程序根目录中使用的所有 FA 图标：

   import { library as fontAwesomeLibrary } from '@fortawesome/fontawesome-svg-core';
   import {
     faPlugCircleMinus,
     faPlugCirclePlus,
     faSchool,
     faUsers,
   } from '@fortawesome/free-solid-svg-icons';
   
   fontAwesomeLibrary.add(
     faPlugCircleMinus,
     faPlugCirclePlus,
     faSchool,
     faUsers,
   );
   

3. 使用简写语法来显示相关组件中的图标，例如：

   import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
   ...
   const element = (
     <FontAwesomeIcon icon='school' />
   );
   

或者，您也可以在需要时导入各个图标。这种方法的缺点是，每次向组件添加图标时，您都必须记住每个图标来自哪个包：

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSchool } from '@fortawesome/free-solid-svg-icons';
...
const element = (
  <FontAwesomeIcon icon={faSchool} />
)