如何将花朵弹出菜单的Bars图标替换为Bolt？Font Awesome配置

我找到一个用HTML和CSS编写的彩色花朵弹出菜单，想要把菜单按钮的三条杠（Bars）图标替换为闪电（Bolt）图标，原代码未使用Font Awesome，请问该如何实现？

相关截图：

提供两种实现方式，按需选择：

方法一：纯CSS绘制闪电图标（无需外部资源） #

直接通过CSS的clip-path绘制闪电形状，完全不需要引入外部图标库：

1. 修改HTML结构 #

把原来的三条杠<span>元素替换为单个闪电元素：

<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
  <label class="menu-open-button" for="menu-open">
    <!-- 替换原三条杠为闪电元素 -->
    <span class="bolt"></span>
  </label>

  <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
  <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
  <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
  <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
  <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>

2. 添加闪电图标CSS样式 #

删除原代码中所有和.lines、.line-1、.line-2、.line-3相关的样式，替换为以下代码：

/* 闪电图标基础样式 */
.bolt {
  width: 22px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #596778;
  /* 使用clip-path绘制闪电形状 */
  clip-path: polygon(
    0 10%,
    40% 10%,
    40% 0,
    60% 0,
    60% 10%,
    100% 10%,
    100% 30%,
    60% 30%,
    60% 60%,
    80% 60%,
    80% 80%,
    40% 80%,
    40% 60%,
    0 60%
  );
  transition: transform 200ms ease;
}

/* 菜单打开时的闪电旋转动画（可选，延续原按钮的交互效果） */
.menu-open:checked + .menu-open-button .bolt {
  transform: translate(-50%, -50%) rotate(90deg);
}

方法二：引入Font Awesome使用闪电图标 #

如果不介意引入外部图标库，这种方式更简单：

1. 引入Font Awesome #

在HTML的<head>标签内添加Font Awesome的CDN链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2. 修改按钮内容 #

替换原三条杠为Font Awesome的闪电图标：

<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
  <label class="menu-open-button" for="menu-open">
    <i class="fa fa-bolt"></i>
  </label>

  <a href="#" class="menu-item blue"> <i class="fa fa-anchor"></i> </a>
  <a href="#" class="menu-item green"> <i class="fa fa-coffee"></i> </a>
  <a href="#" class="menu-item red"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item purple"> <i class="fa fa-microphone"></i> </a>
  <a href="#" class="menu-item orange"> <i class="fa fa-star"></i> </a>
  <a href="#" class="menu-item lightblue"> <i class="fa fa-diamond"></i> </a>
</nav>

3. 调整图标样式（可选） #

如果需要优化图标的大小、颜色或动画，添加以下CSS：

.menu-open-button .fa-bolt {
  color: #596778;
  font-size: 28px;
  line-height: 80px;
  transition: transform 200ms ease;
}

/* 菜单打开时的旋转动画 */
.menu-open:checked + .menu-open-button .fa-bolt {
  transform: rotate(90deg);
}

内容的提问来源于stack exchange，提问作者soheil